Question

我是CSS和HTML的新手，我正在尝试创建一个简单的HTML页面。

关于实施：我有一个名为容器的主要div具有相对定位。在这个主div中，我还有3个div：header-located absolute with top：0px，menu- also absolute，footer-absolute with bottom：0px。我的主要问题是关于菜单div和页脚之间的内容div。如果此内容div具有大量信息，则其高度将大于主div（容器），并且页脚将显示在内容div的信息上。

我试图不在padding-top的菜单div下给定位置，但最后2-3行在页脚下丢失。我应该说粘性页脚不是我想要的。我需要另一种解决方案。

这是HTML：

<body>
        <!-- CONTAINER -->
        <div id="container">
            <!--HEADER-->
            <div id="header" >
                <p>Header</p>
            </div>
            <div id="menu" >
                <ul>
                    <li>Menu Item 1</li>
                    <li>Menu Item 2</li>
                    <li>Menu Item 3</li>
                    <li>Menu Item 4</li>
                    <li>Menu Item 5</li>
                </ul>
            </div>
            <!-- Problematic div -->
            <div id="content"> // simulate large amount of information
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
                <h1> Content</h1>
            </div>
            <div id="footer">
                <p> Footer </p>
            </div>
        </div>
    </body>

和CSS：

html,
body {
   margin:0;
   padding:0;
   height:100%;
}

#container{
    position : relative;
    min-height:100%;
}

#header{
    top : 0px;
    position : absolute;
    width : 100%;
    height : 100px;
    background-color: red;
}

#header p{
    position : absolute;
    top : 39px;
}


#menu{
    position : absolute;
    top : 100px;
    width: 100%;
    background-color: yellow;
    overflow: auto;
    white-space:nowrap;
}

#menu ul{
    margin : 0px;
    padding-left: 20px;
    list-style-type: none;
}
 #menu li{
    display : inline-block;
    padding-right: 150px;
    border-style : 1px solid;
 }

 #content{
    /*
    padding-top : 121px;
    */
    position: absolute;
    top : 120px;
    width : 100%;
    background-color: green;
 }

 #footer{
    position: absolute;
    width: 100%;
    height : 60px;
    background-color:grey;
    bottom : 0px;
 }

对不起，很长的帖子。我只是尽力解释这个问题。非常感谢。

Answer 1

要修改而不修改HTML，请将display: inline-block;应用于#content和#footer，移除定位，然后将padding-top: 121px;添加回#content：{{3 }}

#content {
    padding-top : 121px;
    width : 100%;
    background-color: green;
    display: inline-block;
}
#footer {
    width: 100%;
    height : 60px;
    background-color:grey;
    display: inline-block;
}

Answer 2

您可以约束div＃content的高度并使用overflow：滚动以使内容可滚动。

#content{
  position: absolute;
  top: 120px;
  width: 10%;
  background-color: green;
  height: 800px; /* assumed height, use an appropriate value */
  overflow: scroll;
}

CSS Overflow - MDN

Answer 3

我遇到同样的问题，内容隐藏在我的页脚后面。如果你的页脚处于某种固定高度，就像我一样：

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  min-height: 100px;
  max-height: 110px;
  background-color: rgba(36, 32, 33, 0.9);
  color: white;
  font-family: "Helvetica Neue", Helvetica;
  padding: 10px 0px;
  padding-top: 10px;
  margin-top: 30px;
  font-weight: 100;
  clear: both;
}

只需将包含页面内容的div的下边距设置为高于最大页脚高度的高度。滚动内容将停在页脚顶部！

#content {
  -moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
  -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
  box-shadow: 1px 1px 2px 0 #d0d0d0;
  background: #fff;
  border: 1px solid #ccc;
  border-color: #e4e4e4 #bebebd #bebebd #e4e4e4;
  padding: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 115px;
  clear: both;
}

就像免责声明一样，这是我对这个问题的第一个回答。我提前为上面提到的任何编码失败道歉。：）

Answer 4

这对我有用：
包裹在一个 div 中并添加填充。
像这样：

<div class="p-3">
<footer class="border-top footer text-light bg-dark">
    <div class="container">
        &copy; @DateTime.UtcNow.Year - The name of the owner - <a asp-area="" asp-controller="Home" asp-action="Contact" class="stretched-link">Contact</a>
    </div>
</footer>
</div>

页脚显示在内容上。我总是在页面底部需要它

4 个答案: