My question is if there is a way, without using JavaScript, to cause child divs to extend to the borders of their parent, without exceeding those borders, when you cannot know beforehand the size of the parent div?
Below is sample markup/styles demonstrating my issue. If you load it into a browser you will see that #two and #three both extend outside their parent, #one, and cause scrollbars to appear.
My issue is not so much the scrollbars, but that I do not know how to tell the child divs to occupy the width or height remaining to them, rather than the full height or width of the parent.
<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body>
</html>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
