1

我不是 css 专家，但我已经没有什么想法可以触发这种不需要的行为了。我想使用 adiv作为我网站主要部分的背景。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;
}

任何想法发生了什么，为什么？

4

4 回答 4

1

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

100% 指的是元素的父元素，即body. 所以content_wrapper会和身体一样大。但它也是绝对定位的，因此被排除在流程之外。这意味着 的大小body不随内容的大小而变化。这反过来意味着它content_wrapper也不会增长，并且内容只是因为溢出而可见。

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

于 2013-04-22T14:22:57.027 回答
1

尝试将内容包装器设置为位置：相对而不是绝对。并摆脱 .content 上的浮动。

要么那个，要么在它下面放一个clearing 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;
}
于 2013-04-22T14:19:18.863 回答
1

将您的 .content_wrapper 更改为此代码：

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

您不应该使用 position:absolute 来允许它扩展到其父级。并且，在放弃使用 position:absolute 时，您应该使用 margin-top 而不是 top。

于 2013-04-22T14:01:18.903 回答
-1

尝试这个

.content_wrapper{
宽度：100%；
高度：100%；
边距顶部：215px；
背景颜色：#EEE；
z指数：-999；
位置：绝对；
}

z-index 应该在底部分层。
请告诉我这不是您要找的还是不起作用

于 2013-04-22T14:10:58.180 回答