Html 底部的导航栏，居中-CSS_Html_Css_Navigation

Html 底部的导航栏，居中-CSS

html css navigation

Html 底部的导航栏，居中-CSS,html,css,navigation,Html,Css,Navigation,我需要一个如何处理一些问题的快速提示。我已经创建了一个导航条和中心，所以现在它在页面的中间，不管屏幕是多大还是小，但是如何使那个栏停留在页面的底部呢？我知道，当我在main container中添加高度时，它会将该条推到底部，但我想使其不受恒定高度的影响。非常感谢你的建议 HTML <html> <head> </head> <body> <div class="MainContainer"> </div&g

我需要一个如何处理一些问题的快速提示。我已经创建了一个导航条和中心，所以现在它在页面的中间，不管屏幕是多大还是小，但是如何使那个栏停留在页面的底部呢？我知道，当我在

main container

中添加

高度时，它会将该条推到底部，但我想使其不受恒定高度的影响。非常感谢你的建议

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>

通过制作html
和body
高度：100%
并对导航应用固定定位
html, body {
 height: 100%;
}

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

下面是一个JSFIDLE:

请随意调整窗口大小，并查看您的导航始终保持在底部。
以下是一个适合您的解决方案
您有一个输入错误：
.MenuContainer {
    height: 70px;
    bottom:0;
}

应该是：
#MenuContainer {
        height: 70px;
        bottom:0;
    }

根据你的HTML。同时添加位置：固定：
 #MenuContainer {
            height: 70px;
            bottom:0;
            position:fixed;
        }

并以左为中心：0；右：0。此外，选择器的ul
部分也不是必需的。id足够。@FelipeAls居中是通过width:100%
与OPtext align:center
中已有的组合完成的。我同意选择器中的ul部分，但OP已经有了它，所以为了清晰起见，我留下了它。非常感谢@Bazzz为您提供的时间和支持解决我的问题：D-FelipeAls谢谢您的建议，我仍在努力管理我的代码：）更新注释不再有效。OP已更改HTML。-->你提出了一些有效的观点，但是，这甚至与导航没有任何关系，当然也不会让它停留在OP要求的页面底部。不要给你id和类相同的名称。它不会让机器感到困惑，但会让你感到困惑。是的，你是对的。。困惑是我想要避免的事情：）
 #MenuContainer {
            height: 70px;
            bottom:0;
            position:fixed;
        }