Question

我想要一个页面，第一个div高度为100％（没问题），内部有两个div，覆盖父div的整个高度。如果2个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

Answer 1

首先，如果您希望它们从上到下显示，则应使用float属性，对于第二高度，您可以使用calc(100% - 40px)这里是浏览器对此属性的支持（{{ 3}}）。

Answer 2

要填写父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

CSS覆盖高度，以像素和百分比表示

2 个答案: