need absolute measures in liquid layout
I have two child divs in a parent div. fi开发者_运维百科rst child div A has an absolute height and second div B should take the rest of the height available. How to do this? Basically for div, I want height like (100% - 37px)
<style>
#C{
height:100%;
width:500px;
}
#A{
height:37px;
width:100%;
}
#B{
height: ????;
width:100%
}
</style>
<div id="C">
<div id="A"></div>
<div id="B"></div>
</div>
@alter, for rest on the height you need to give padding to the div B according to the height of div A
#B{
padding-top:37px;
}
for example
I think the best way to achieve that is to give the parent div a min-height and then give div B a min-height of (min-height - 37)px. See code below
#C{min-height:600px; width:500px;}
#A{height:37px; width:100%;}
#B{min-height:563px; width:100%}
Sample Code:
<html>
<head>
<style type="text/css">
#C{min-height:600px; width:500px; background-color:yellow;}
#A{height:37px; width:100%; background-color:blue;}
#B{min-height:563px; width:100%; background-color:black;}
</style>
</head>
<body>
<div id="C">
<div id="A"></div>
<div id="B"></div>
</div>
</body>
</html>
I have added color to the divs just to differentiate them
加载中,请稍侯......
精彩评论