Question

我们正在使用CSS3和HTML5。我试图写一个页面，其中将有一个div显示一些渐变，然后是标题，标题后跟一个容器。

这是我写的并且工作正常，直到我介绍了一些虚线。 Click here查看示例，这是代码段

CSS，

html {
    height: 100%;
}
body {
    margin: 0px;
    height: 100%;
}
.container {
    height: 100%;
}
.oss-gradient {
    height: 5px;
    min-width: 1024px;
    background: yellow;
}
.header {
    height: 40px;
    min-width: 1024px;
    background: #def;
}
.content-wrapper {
    width: 1024px;
    height: calc(100% - 45px);
    background: #defabc;
    margin: 0px auto;
}

我的HTML，

<div class="container">
    <div class="oss-gradient">
    </div>
    <div class="header">
    </div>
    <div class="content-wrapper">
        <!-- some dummy lines here //-->
    </div>
</div>

然后我将content-wrapper的height属性更改为min-height。然后它工作正常。当我尝试更改缩放级别和浏览器窗口的大小时，它工作正常。然后我打开了萤火虫，并在contianer div，body和html元素上盘旋。我注意到content-wrapper元素来自容器div。换句话说，容器，主体和html没有使用content-wrapper元素进行扩展。

然后我为容器div添加了min-height属性，认为它会扩展wrt内容包装器。然后我缩小了页面，发现内容包装器没有扩展可用高度。

然后我删除了容器上html，body和min-height属性的height属性。现在所有三个元素都会扩展到孩子身上。但是当我删除所有虚拟线条时，我无法看到内容包装器div。

我该如何解决这个问题？

Answer 1

您需要对min-height元素使用body，并在background元素上使用html

Demo（涵盖整页）

Demo 2（内容更多）

body {
    margin: 0px;
    min-height: 100%;
}

您可以针对类似问题提及我的问题here。

容器的高度w.r.t儿童

1 个答案: