Question

我不是一名css专家，但我已经没有想法会触发这种不受欢迎的行为。我想使用div作为我网站主要部分的背景。一旦我的div content中有大量内容，div content_wrapper就无法完全展开。这是我的HTML的一部分

<div class="content_wrapper">
    <div class="content">
        <h1>Some heading</h1>
        <p>lot's of text</p>
    </div>
<footer>
    <div id="foot">
        <a id="disclaimer" href="disclaimer.html"> disclaimer</a> 
    </div>
    </footer>
</div>

和.css。

.content_wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 215px;
    background-color: #EEE;

}
.content{
    z-index: 5;
    float:left;
    margin: 50px 0 50px 20px;
    width: 75%;
    padding: 20px;
    background-color: #FFF;
    border-left: dashed 1px #CCC;
    border-top: dashed 1px #CCC;

    -webkit-border-top-left-radius: 25px;
    -moz-border-radius-topleft: 25px;
    border-top-left-radius: 25px;
}

任何想法是什么以及为什么？

Answer 1

将.content_wrapper更改为此代码：

.content_wrapper{
    width: 100%;
    height: 100%;
    margin-top: 215px;
    background-color: #EEE;
}

您不应该使用position：absolute来允许它扩展为其父级。而且，至于使用position：absolute，你应该使用margin-top而不是top。

Answer 2

尝试将content-wrapper设置为position：relative而不是absolute。并摆脱你的.content浮动。

要么是这样，要么在它下面放一个清除div。

.content_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    top: 215px;
    background-color: #EEE;
}

.content {
    z-index: 5;
    margin: 50px 0 50px 20px;
    width: 75%;
    padding: 20px;
    background-color: #FFF;
    border-left: dashed 1px #CCC;
    border-top: dashed 1px #CCC;
    -webkit-border-top-left-radius: 25px;
    -moz-border-radius-topleft: 25px;
    border-top-left-radius: 25px;
}

Answer 3

此处的问题是position: absolute和width/height: 100%的组合。

100％引用元素的父级，即body。所以content_wrapper会和身体一样大。但它也绝对定位，因此从流程中取出。这意味着body的大小不会随内容的大小而变化。这反过来意味着content_wrapper也不会增长，内容只会因为溢出而可见。

不要使用宽度和高度，你应该没事。

Answer 4

试试这个

.content_wrapper {
      宽度：100％;
      身高：100％;
      margin-top：215px;
      background-color：#EEE;
      的z-index：-999;
      位置是：绝对;
  }

z-index应该将其分层放在底部请告诉我，如果这不是您正在寻找的或不起作用

div没有完全扩展到内容

4 个答案: