问
如何将导航栏固定到底部而不是顶部

Ailsa大宝贝发布于 2023-02-09 17:57
html
这里的问题是我的导航栏位于fixed顶部,我希望它fixed位于底部:



My Resume




TheCodePress.blogspot.com              

Home
My Blog
Tutorials
Downloads
About






Home
Qualifications
Portfolio
Contact





</pre>

<p>这是我的CSS</p>

<pre class="brush:bash;">#nav
 {
 background-color:#262626;
 width:100%;
 height:50px;
 box-shadow: 0px 1px 50px #5E5E5E;
 position:fixed;
 top:0px;
}

.title
 {
 color:#EDEDED;
 font-family:verdana;
 font-size:25px;
 width:350px;
 margin-top:6px;
 margin-left:150px;
 font-weight:bold;
 float:left;
}
.subtitle 
{
 color:#EDEDED;
 font-family:verdana;
 font-size:15px;
}

#navigation
{
 list-style-type:none; 
}
li 
{
 display:inline;
 padding:10px;
}
#nav a
{
 font-family:verdana;
 text-decoration:none;
 color:#EDEDED;
} 
#nav a:hover 
{
 color:#BDBDBD;
}

#body 
{
 width:850px;
 margin:0px auto;
 margin-top:80px;
 font-family:verdana;
}

body 
{
 margin:0px;
}
</pre>

<p>我已多次尝试改变位置,但失败了.关于如何做的任何想法？</p>        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8923551941185667"
                crossorigin="anonymous"></script>
        <ins class="adsbygoogle"
             style="display:block; text-align:center;"
             data-ad-layout="in-article"
             data-ad-format="fluid"
             data-ad-client="ca-pub-8923551941185667"
             data-ad-slot="9961241226"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

        <div class="q_answer_list">
        <div class="q_answer_list_top">2 个回答</div>
        <ul>
                        <li>
                <div class="an_content"><p>在你的CSS中进行<code>#nav</code>更改</p>

<pre class="brush:bash;">top:0px;
</pre>

<p>至</p>

<pre class="brush:bash;">bottom:0px;
</pre></p>
        </div>
                <div class="an_info">
                    <div class="an_creat_info">2023-02-09 18:00  回答</div>
                    <div class="an_user_info"><img src="https://img.php1.cn/3cd4a/1e789/bdf/9c4fff005e6170ab.jpeg" width="20"/> &nbsp;&nbsp;X巩工916BGR_426</div>
                </div>
            </li>
                        <li>
                <div class="an_content"><p>在CSS中的#nav下只需更改:</p>

<pre class="brush:bash;">top:0px;
</pre>

<p>至</p>

<pre class="brush:bash;">bottom:0px;
</pre>

<p>这应该够了吧</p></p>
        </div>
                <div class="an_info">
                    <div class="an_creat_info">2023-02-09 18:00  回答</div>
                    <div class="an_user_info"><img src="https://img.php1.cn/3cd4a/1b687/1c8/0a927da94b50d2f9.png" width="20"/> &nbsp;&nbsp;hhxsv5</div>
                </div>
            </li>
                    </ul>
    </div>
    
    <div class="q_answer">
        <div class="q_answer_top">撰写答案</div>
        <div class="q_answer_box">
            <form action="https://ask.php1.cn/?s=index/questionAnswer&id=626816" method="post">
                <div class="q_answer_txt">
                    <textarea id="editor1" name="editor1" >回答问题...</textarea>
                </div>
                <script>
                    var config = {
                        extraPlugins: 'codesnippet',
                        codeSnippet_theme: 'monokai_sublime',
                        height: 200
                    };

                    CKEDITOR.replace( 'editor1', config );
                </script>
                <div class="q_answer_bt">
                    <input type="submit" value="提交回答">
                </div>
            </form>
        </div>
    </div>


</div>

    <div class="ask_main_right">
    <div class="ask_add_tips">
        <div class="ask_add_title">今天，你开发时遇到什么问题呢？</div>
        <a href="https://ask.php1.cn/?s=index/add"><div class="ask_add_bt">立即提问</div></a>
    </div>

    <div class="ask_tags">
        <div class="ask_tags_title">热门标签</div>
        <div class="ask_tags_list">
            <ul>
                                <div style="clear:both"></div>
            </ul>
        </div>
    </div>


    
</div>    <div style="clear: both"></div>
</div>

<div style="clear: both"></div>
<div class="bottom">
    PHP1.CN | 中国最专业的PHP中文社区 | <a href="https://www.php1.cn/pngimg/" target="_blank"  title="PNG素材下载">PNG素材下载</a> |  <a href="https://devbox.cn/" target="_blank"  title="DevBox开发工具箱">DevBox开发工具箱</a> | <a href="https://www.json1.cn/" target="_blank"  title="json解析格式化">json解析格式化</a> |<a href="https://news.php1.cn/" title="PHP资讯">PHP资讯</a> | <a href="https://school.php1.cn/" title="PHP教程">PHP教程</a> | <a href="https://database.php1.cn/" title="数据库技术">数据库技术</a> | <a href="https://server.php1.cn/" title="服务器技术">服务器技术</a> | <a href="https://web.php1.cn/" title="前端技术">前端开发技术</a> | <a href="https://www.php1.cn/phpframework.html" title="PHP框架">PHP框架</a> | <a href="https://tools.php1.cn/">开发工具</a>  | <a href="https://www.json1.cn/tools/" title="在线工具">在线工具</a><BR />
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved   <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802041100" style="color:#444;"><img src="https://img.json1.cn/3cd4a/21981/c5a/4df0b47476da9030.png"/>京公网安备 11010802041100号</a>  |  <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备19059560号-4</a> | PHP1.CN 第一PHP社区  版权所有 <BR />
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<script>
    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'https://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

<script type="text/javascript" src="//js.users.51.la/21559097.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="/style/SyntaxHighlighter/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="/style/SyntaxHighlighter/styles/shThemeLiuQing.css"/>
<style>
    .syntaxhighlighter{
        width: 600px;
        padding-top:40px;padding-bottom:20px;
        border: 1px solid #333;
        background: url("/style/SyntaxHighlighter/top_bg.svg");
        background-size: 43px;
        background-repeat: no-repeat;
        margin-bottom: -7px;
        border-radius: 15px;
        background-position: 16px 12px;

    }
    .gutter{
        display: none;
    }
</style>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

</body>
</html>