容器高度w.r.t儿童

我们使用CSS3和HTML5。我试图写一个页面，其中将有一个div来显示一些渐变，然后是标题，然后是一个容器。容器高度w.r.t儿童

这是我写的，工作正常，直到我介绍了一些虚拟线。 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>

然后，我改变了内容包装的高度属性为最小高度。然后它运行良好。当我尝试更改缩放级别和浏览器窗口的大小时，它工作得很好。然后我打开了萤火虫，并在contianer div，body和html元素上徘徊。我注意到content-wrapper元素来自容器div。换句话说，容器，body和html没有使用content-wrapper元素进行扩展。

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

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

我该如何解决这个问题？

来源

2013-12-19 Krishna Chaitanya

您需要使用min-height您body元素和你html元素

Demo（覆盖整个页面）

Demo 2上使用background（随着越来越多的内容）

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

你可以参考我的问题here类似的问题。

来源

2013-12-19 06:23:23

@ mr-alien这不能解决我的问题。首先我的网站是为1024X768像素设计的。如果我想为我的content-wrapper div创建背景怎么办？我改变了背景并缩小了网页。我再次看到一些问题。 –

@KrishnaChaitanya你看过我的演示了吗？如果你只想保留content div的背景，而不是去寻找一个js解决方案，如果你是多余的移动背景 –

@ mr-alien：是的，我看到你的演示，甚至阅读你提到的链接。我知道有没有简单的方法来实现这一点。我将使用身高的html和min-height。这使得身体在放大和缩小时扩展整个视口。但是我的容器不占用视口高度或身体的高度。当我在容器和缩放上添加背景时，它看起来很难看。对于zoomin其工作正常 –

容器高度w.r.t儿童

回答

相关问题