页面底部的FB样式菜单栏被内容覆盖

FB-style Menubar on bottom of page gets covered by content

本文关键字：覆盖 菜单栏 样式 底部 FB      更新时间：2023-09-26

>我有一个水平菜单栏附加到我的页面底部（就像FB在页面顶部有一个栏）使用

.bottom_menu {position:absolute; bottom:0px; z-index:100}

我在页面中的主要内容被放置在绝对定位的div 框中。

.main_content {position:absolute; top:100px; left:75px;right:75px; z-index:100}

问题是，如果我在选项卡中有太多内容行，它会出现在菜单栏上方，而不是将其推到底部。

我如何构建它以使菜单栏始终保持在屏幕底部，例如至少在div 内最后一行内容下方的几行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;
}
相关文章：