底部的导航栏，中心 - CSS答案

【问题标题】：Navigation bar at bottom, centerd - CSS底部的导航栏，中心 - CSS
【发布时间】：2013-03-29 07:54:58
【问题描述】：

我需要一个快速提示如何解决一些问题。我创建了一个导航栏并将其居中，所以现在无论屏幕大小，它都位于页面中间，但是如何使该栏保持在页面底部？我知道当我将height 添加到.MainContainer 时，它会将那个条推到底部，但我想让它不受恒定高度的影响。非常感谢您的任何建议！

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

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

【问题讨论】：

不要给你的 id 和类同名。它不会迷惑机器，但会迷惑你。
是的，你是对的 .. 混淆是我想要避免的事情:)

标签： html css navigation

【解决方案1】：

通过制作html 和body height:100% 并将固定定位应用于您的导航。

html, body {
 height: 100%;
}

ul#navigation {
 position: fixed;
 bottom: 0;
 width: 100%;
}

这是一个 jsFiddle：http://jsfiddle.net/nqKpe/1/
随意调整窗口大小，看看您的导航始终保持在底部。

【讨论】：

并以left: 0; right: 0; 为中心。此外，选择器的 ul 部分也不是必需的。 id就够了。
@FelipeAls 居中由 width:100% 与 OP 中已有的 text-align:center 组合完成。我同意选择器中的 ul 部分，但 OP 已经有了它，所以为了清楚起见，我把它留下了。
非常感谢 @Bazzz 抽出时间并支持它解决我的问题：D -FelipeAls 感谢您的建议，我仍在学习管理我的代码 :)

【解决方案2】：

这是为您工作的JSFIDDLE

你有一个错字：

.MenuContainer {
    height: 70px;
    bottom:0;
}

应该是：

#MenuContainer {
        height: 70px;
        bottom:0;
    }

根据您的 HTML。还要加position:fixed;：

 #MenuContainer {
            height: 70px;
            bottom:0;
            position:fixed;
        }

【讨论】：

update 评论不再有效。 OP 已更改 HTML。 ----> 您提出了一些有效的观点，但是，这甚至对导航没有任何作用，当然也不会按照 OP 的要求使其停留在页面底部。