CSS覆盖以像素和百分比为单位的高度[关闭]答案

【问题标题】：CSS cover with heights in pixels and percentages [closed]CSS覆盖以像素和百分比为单位的高度[关闭]
【发布时间】：2013-03-05 05:52:44
【问题描述】：

我想要一个页面，其中第一个 div 的高度为 100%（这没问题），其中的两个 div 覆盖了父 div 的整个高度。如果 2 个 div 的高度以百分比表示，则不会有问题，但事实是我需要一个以像素为单位的 div（特定高度）和另一个以百分比表示的 div（覆盖其余部分）。

我可以使用 CSS 还是应该使用 javascript？（我喜欢尽可能只使用 CSS）

HTML结构：

<html style="height: 100%;">
<head></head>
<body style="height: 100%;">
    <div style="height: 100%;">
        <div style="height: 40px;"></div>
        <div style="height: ???"></div>
    </div>
</body>
</html>

感谢您的任何回答。

Ecorce

【问题讨论】：

您尝试过这样做吗？发生了什么？
为什么不给所有 div 的高度以百分比表示它易于管理。

标签： css height cover

【解决方案1】：

要填充父 div 中的可用空间，只需使用此

.parent
{
  position: relative;
}

.child
{
  position: absolute;
  bottom: 0;    
  top: 40px;   /* can set accordingly"*/   
}

所以试试这段代码

 <div class="parent">
        <div class="fixedChild"></div>
        <div class="dynamicChild">ss</div>
</div>

CSS：

body,html
{
    height:100%;
}
.parent
{
    height:100%;
    min-height:100%;
    background-color:Black;
    position: relative;
}
.fixedChild
{
    height:40px;
    background-color:Green;
}
.dynamicChild
{
    background-color:Red;
    position: absolute;
    top: 40px;
    bottom: 0;
    width:100%;
}

这里是JS Fiddle demo

【讨论】：

【解决方案2】：

首先，如果你想让它们从上到下显示，你应该使用float属性，第二个高度你可以使用calc(100% - 40px)这里是浏览器对这个属性的支持（http://caniuse.com/#feat=calc）。

【讨论】：