Question

这里的问题是我的导航栏是fixed到顶部，我希望它是fixed到底部：

<html>
<body>
<center>
<h1>My Resume</h1>
<link rel="stylesheet" type="text/css" href="csstrial.css">
<center>

<div id="nav">
<p class="title"><a href="#">TheCodePress<span class="subtitle">.blogspot.com</span>              </a></p>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
</ul>
</div>


<nav>
<ul>
<li><a href="home.html" target='MYHOME'>Home</a></li>
<li><a href="cmon.html" target='MYHOME'>Qualifications</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>


<iframe src="home.html" name="MYHOME" height="550" width="700"
frameborder="0">

这是我的CSS

#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;
}

我已多次尝试改变位置，但失败了。关于如何做的任何想法？

Answer 1

在CSS中的#nav下只需更改：

top:0px;

到

bottom:0px;

应该做的伎俩

Answer 2

在#nav更改的CSS中

top:0px;

要

bottom:0px;

Answer 3

在你的css文件中，在nav下只需切换顶部：0px到底部：0px，就像这样

#nav
 {
 background-color:#262626;
 width:100%;
 height:50px;
 box-shadow: 0px 1px 50px #5E5E5E;
 position:fixed;
 bottom:0px;
 }

Answer 4

您想将它固定在页面底部吗？或者只是div的底部？

尝试更改“top：0px;”到“底：0px;”。

Answer 5

#nav 
{
    clear: both;
}

试试这个，但是当你使用定位并同时浮动时，你的制作更难。

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

5 个答案: