以像素为单位的高度和百分比

问题描述：

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

你有没有尝试去做这个？发生了什么？ – Sparky 2013-03-16 14:54:33

为什么你不给高度的百分比所有div的易于管理。 – 2013-03-16 14:55:44

答

对于父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

答

那么首先，如果你想让他们从顶部出现底部，你应该使用float财产，并为第二高度，您可以使用calc(100% - 40px)这里是该物业（http://caniuse.com/#feat=calc）浏览器的支持。

以像素为单位的高度和百分比

相关推荐