底部居中导航栏 - CSS

Question

底部居中导航栏 - CSS

4

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

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

- d3w00n

不要给你的ID和类起相同的名称。这不会让机器混淆，但会让你混淆。 - He Hui

是的，你说得对..混淆是我想避免的东西 :) - d3w00n

2个回答

0

这是一个可用的JSFIDDLE链接。

你有个错字：

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

应该是：

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

根据你的HTML，还要添加position:fixed;:

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

- enb081

更新：评论不再有效。OP已更改HTML。----> 你提出了一些有价值的观点，但是这并没有涉及到导航，而且肯定不能像OP要求的那样使其保持在页面底部。 - Bazzz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bazzz · Accepted Answer

通过将 html 和 body 的 height:100% 属性设置为固定位置，可以实现导航栏的固定。

html, body {
 height: 100%;
}

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

这里有一个 jsFiddle：http://jsfiddle.net/nqKpe/1/
随意调整窗口大小，你会发现导航栏始终保持在底部。