Html 底部的导航栏，居中 - CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15699459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Navigation bar at bottom, centerd - CSS
提问by d3w00n
I need a quick tip how to manage with some problem. I've created a navi bar and center it so now its in the middle of page no matter how big or small is screen, but how to make that bar to stay on the bottom of page ? I know that when i add a heightto .MainContainerit push that bar to the bottom but i want to make it dependless of constant height. Big thanks for any advice!
我需要一个快速提示如何处理一些问题。我已经创建了一个导航栏并将其居中，所以无论屏幕有多大或多小，它现在都位于页面中间，但是如何使该栏保持在页面底部？我知道当我添加一个时height，.MainContainer它会将那个条推到底部，但我想让它不依赖于恒定的高度。非常感谢您的任何建议！
HTML
HTML
<html>
<head>
</head>
<body>
<div class="MainContainer">
</div>
<div id="MenuContainer">
<ul id="navigation">
<li class="x"><a title="1" href="indexX-1.html" >1</a></li>
<li class="x"><a title="2" href="#" >2</a></li>
<li class="x"><a title="3" href="#" >3</a></li>
<li class="x"><a title="4" href="#" >4</a></li>
<li class="x"><a title="5" href="#" >5</a></li>
<li class="contact" class="last"><a title="6" href="#" >6</a></li>
</ul>
</div>
</body>
</html>
CSS
CSS
.MainContainer {
width: 1200px;
background-color: #0066CC;
}
.MenuContainer {
height: 70px;
bottom:0;
}
ul#navigation {
height: 70px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #ccc;
border-width: 1px 0;
text-align: center;
font-size: 22px;
font-family: 'Cham-WebFont', Arial, sans-serif;
background-color: #FFF;
}
ul#navigation li {
display: inline;
margin-right: .75em;
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li.last {
margin-right: 0;
}
采纳答案by Bazzz
By making htmland bodyheight:100%and applying fixed positioning to your navigation.
通过在导航中制作html和bodyheight:100%应用固定定位。
html, body {
height: 100%;
}
ul#navigation {
position: fixed;
bottom: 0;
width: 100%;
}
Here is a jsFiddle: http://jsfiddle.net/nqKpe/1/
Feel free to resize the window and see that your navigation always remains at the bottom.
这是一个 jsFiddle：http: //jsfiddle.net/nqKpe/1/
随意调整窗口大小并查看您的导航始终位于底部。
回答by enb081
Here's a working JSFIDDLEfor you
这是适合您的JSFIDDLE
You have a typo:
你有一个错字：
.MenuContainer {
height: 70px;
bottom:0;
}
should be:
应该：
#MenuContainer {
height: 70px;
bottom:0;
}
according to your HTML. Also add position:fixed;:
根据您的 HTML。还添加position:fixed;：
#MenuContainer {
height: 70px;
bottom:0;
position:fixed;
}
