我在页面底部附加了一个水平菜单栏(就像 FB 在页面顶部有它的栏一样)使用
.bottom_menu {position:absolute; bottom:0px; z-index:100}
我在页面中的主要内容放置在一个绝对定位的 div 框内。
.main_content {position:absolute; top:100px; left:75px;right:75px; z-index:100}
问题是,如果选项卡中的内容行太多,它会出现在菜单栏的上方,而不是将其推到底部。
我该如何构造它,以便菜单栏始终位于屏幕底部,比如在 最后一行内容下方 内至少有几行main_content 分区?
谢谢,如果这是一个非常愚蠢的问题,请提前道歉! :)
最佳答案
像这样为页脚菜单和内容部分创建一个容器:
<div class="container">
<div class="content">
</div>
<ul>
<li>MENU</li>
<li>MENU</li>
<li>MENU</li>
<li>MENU</li>
</ul>
</div>
然后将容器的位置设置为relative
,将菜单的位置设置为absolute
。将容器的 padding-bottom
设置为与菜单高度相同,以防止内容覆盖菜单。
内容将增加容器的高度,页脚菜单将始终位于容器的底部。
CSS
ul, body, htnl{
padding:0;
margin:0;
}
li{
list-style:none;
float:left;
margin-left:10px;
}
div.container{
position:relative;
min-height:30px;
background:#eee;
padding-bottom:50px;
}
ul{
position:absolute;
bottom:0;
height:50px;
width:100%;
background:#aaa;
}
关于javascript - 页面底部的 FB 风格菜单栏被内容覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19995516/