-3

我想要一个第一个 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>

感谢您的任何回答。

埃科塞

4

2 回答 2

0

要填充父 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 演示

于 2013-03-16T15:10:39.540 回答
0

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

于 2013-03-16T14:57:33.883 回答