1

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

所以关于实现：我有一个名为容器的主 div，具有相对定位。在这个主 div 中，我还有 3 个 div：header-定位绝对，顶部：0px，菜单-也是绝对，页脚-绝对底部：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;
 }

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

4

4 回答 4

2

要在不修改 HTML 的情况下进行修复，请应用display: inline-block;到#contentand #footer，删除定位，然后重新添加padding-top: 121px;到#content：http: //jsfiddle.net/a2jJC/2/

#content {
    padding-top : 121px;
    width : 100%;
    background-color: green;
    display: inline-block;
}
#footer {
    width: 100%;
    height : 60px;
    background-color:grey;
    display: inline-block;
}
于 2013-11-08T18:26:24.740 回答
2

您可以限制 div#content 的高度并使用 overflow: scroll 使内容可滚动。

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

CSS 溢出 - MDN

于 2013-11-08T18:28:27.017 回答
2

我遇到了同样的问题，内容隐藏在我的页脚后面。如果您的页脚（有点）固定高度，就像我一样：

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

作为免责声明，这是我在这里对一个问题的第一个回答。对于上面提交的任何编码错误，我提前道歉。:)

于 2017-12-02T23:25:42.217 回答
0

这对我有用：
包装在一个 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>
于 2021-05-05T23:18:18.827 回答