Question

我一直在寻找一个没有太多运气的答案。我在这里检查了关于css导航栏，但我找到的对我来说不起作用。我正在寻找的可能是一个棘手的但后来一些网站显示这种类型的设计。我正试图让导航栏居中并且粘性页脚......好吧....坚持在底部。但它似乎没有用。这是代码：

html, body{
height: 100 %;margin: 0; padding: 0;
}

.wrapper{
    min-height: 100%;
    height: 100%;
    margin: 0 auto;
}

header{
    height: 80px;
    background-color: lightgray;
}

nav{
    background-color: darkgray;
    overflow: auto;
}

nav ul{
    margin-top: 10px;
   padding: .7em;
   position: relative;
   float: left;
   list-style: none;
   background: #444;
   background: rgba(0,0,0,.2);
   box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
   border-radius: .3em;    

}

nav li{
    float:left;
}

nav a {
    float:left;
   padding: .8em 1.5em;
   text-decoration: none;
   color: #555;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   font: bold 1.1em/1;
   letter-spacing: 1px;
   text-transform: uppercase;
   border-width: 1px;
   border-style: solid;
   border-color: #fff #ccc #999 #eee;
   background: #c1c1c1;
   background: linear-gradient(#f5f5f5, #c1c1c1);      
 }


 nav a:hover, nav a:focus {
   outline: 0;
   color: #fff;
   text-shadow: 0 1px 0 rgba(0,0,0,.2);
   background: #cc0099;
   background: linear-gradient(#cc0099, #db4db8); 
}

nav a:active {
   box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}

nav li:first-child a {
   border-left: 0;
   border-radius: 4px 0 0 4px;            
}

nav li:last-child a {
   border-right: 0;
   border-radius: 0 4px 4px 0;            
} 


.content{
    margin: 5px;
    background-color: darkmagenta;
}

footer{
    height: 80px;
    width: 100%;
    background-color: darkblue;
}

<html>
    <head>
        <link rel="stylesheet" href="test_nav.css" />
    </head>
    <body>
        <div class="wrapper">
        <header>Hi there !</header>
        <nav>
            <ul>
                <li><a href="one.html" class="current">One</a></li>
                <li><a href="two.html">Two</a></li>
                <li><a href="three.html">Three</a></li>
                <li><a href="four.html" >Four</a></li>
                <li><a href="five.html">Five</a></li>
            </ul>
        </nav>
        <div class="content">Content 1</div>
        <div class="content">Content 2</div>
        </div>
        <footer>Bye bye</footer>
    </body>
</html>

不太确定我做错了什么但很确定我是谁！

Answer 1

将页脚粘贴到底部使用：

footer{
    height: 80px;
    width: 100%;
    background-color: darkblue;
    position: fixed;
    bottom: 0px;
    z-index: 99999;
}

Answer 2

以下是解决方案：）

html, body{
height: 100 %;margin: 0; padding: 0;
}

.wrapper{
    min-height: 100%;
    height: 100%;
    margin: 0 auto;
}

header{
    height: 80px;
    background-color: lightgray;
}

nav{
    background-color: darkgray;
    overflow: auto;
}

nav ul{
    margin-top: 10px;
   padding: .7em;
   position: relative;
   float: left;
   list-style: none;
   background: #444;
   background: rgba(0,0,0,.2);
   box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
   border-radius: .3em;    

}

nav li{
    float:left;
}

nav a {
    float:left;
   padding: .8em 1.5em;
   text-decoration: none;
   color: #555;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   font: bold 1.1em/1;
   letter-spacing: 1px;
   text-transform: uppercase;
   border-width: 1px;
   border-style: solid;
   border-color: #fff #ccc #999 #eee;
   background: #c1c1c1;
   background: linear-gradient(#f5f5f5, #c1c1c1);      
 }


 nav a:hover, nav a:focus {
   outline: 0;
   color: #fff;
   text-shadow: 0 1px 0 rgba(0,0,0,.2);
   background: #cc0099;
   background: linear-gradient(#cc0099, #db4db8); 
}

nav a:active {
   box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}

nav li:first-child a {
   border-left: 0;
   border-radius: 4px 0 0 4px;            
}

nav li:last-child a {
   border-right: 0;
   border-radius: 0 4px 4px 0;            
} 


.content{
    margin: 5px;
    background-color: darkmagenta;
}

footer{
height: 80px;
width: 100%;
background-color: darkblue;
position: fixed;
bottom: 0px;
z-index: 99999;
}

<html>
    <head>
        <link rel="stylesheet" href="test_nav.css" />
    </head>
    <body>
        <div class="wrapper">
        <header>Hi there !</header>
        <nav>
            <ul>
                <li><a href="one.html" class="current">One</a></li>
                <li><a href="two.html">Two</a></li>
                <li><a href="three.html">Three</a></li>
                <li><a href="four.html" >Four</a></li>
                <li><a href="five.html">Five</a></li>
            </ul>
        </nav>
        <div class="content">Content 1</div>
        <div class="content">Content 2</div>
        </div>
        <footer>Bye bye</footer>
    </body>
</html>

JS小提琴演示：http://jsfiddle.net/fmwr15zo/

Answer 3

使用浮动元素居中元素可能会非常棘手。

将此添加到您的nav样式：

text-align:center;

以nav ul样式，将float: left;更改为：

display: inline-block;

要将footer定位在视口底部，请使用以下样式：

position: fixed;
bottom: 0px;

Answer 4

如果您想要一个粘性页脚，可以添加position属性，然后添加代码，该代码指出HTML代码的分区必须保持固定的像素位置，以及CSS代码。在这种情况下，我们会使用position: fixed;后跟bottom: 0px到页脚部分，因为我们希望页脚始终位于页面底部（bottom: 0px）。这是代码：

html, body{
height: 100 %;margin: 0; padding: 0;
}

.wrapper{
    min-height: 100%;
    height: 100%;
    margin: 0 auto;
}

header{
    height: 80px;
    background-color: lightgray;
}

nav{
    background-color: darkgray;
    overflow: auto;
}

nav ul{
    margin-top: 10px;
   padding: .7em;
   position: relative;
   float: left;
   list-style: none;
   background: #444;
   background: rgba(0,0,0,.2);
   box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
   border-radius: .3em;    

}

nav li{
    float:left;
}

nav a {
    float:left;
   padding: .8em 1.5em;
   text-decoration: none;
   color: #555;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
   font: bold 1.1em/1;
   letter-spacing: 1px;
   text-transform: uppercase;
   border-width: 1px;
   border-style: solid;
   border-color: #fff #ccc #999 #eee;
   background: #c1c1c1;
   background: linear-gradient(#f5f5f5, #c1c1c1);      
 }


 nav a:hover, nav a:focus {
   outline: 0;
   color: #fff;
   text-shadow: 0 1px 0 rgba(0,0,0,.2);
   background: #cc0099;
   background: linear-gradient(#cc0099, #db4db8); 
}

nav a:active {
   box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}

nav li:first-child a {
   border-left: 0;
   border-radius: 4px 0 0 4px;            
}

nav li:last-child a {
   border-right: 0;
   border-radius: 0 4px 4px 0;            
} 


.content{
    margin: 5px;
    background-color: darkmagenta;
}

footer{
height: 80px;
width: 100%;
background-color: darkblue;
position: fixed;
bottom: 0px;
z-index: 99999;
}

<html>
    <head>
        <link rel="stylesheet" href="test_nav.css" />
    </head>
    <body>
        <div class="wrapper">
        <header>Hi there !</header>
        <nav>
            <ul>
                <li><a href="one.html" class="current">One</a></li>
                <li><a href="two.html">Two</a></li>
                <li><a href="three.html">Three</a></li>
                <li><a href="four.html" >Four</a></li>
                <li><a href="five.html">Five</a></li>
            </ul>
        </nav>
        <div class="content">Content 1</div>
        <div class="content">Content 2</div>
        </div>
        <footer>Bye bye</footer>
    </body>
</html>

您会发现content1和content2分区隐藏在页脚后面，该页脚始终是固定的。要避免这种重叠，请在页脚之前添加与页脚大小相同的其他分区。希望这会有所帮助...

要详细了解CSS中的position属性，请访问https://www.w3schools.com/css/css_positioning.asp

导航栏居中和粘性页脚使用CSS

4 个答案: