Menu
Let's say I have 2 Divs.
I tried all what I know: When I set it to 100% it takes up the complete site, so 100px too much. When I try it without setting a height, I get only as much as I write into.
488
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div . z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index . Note that this property only works with positioned elements.
I would probably use some Javascript to solve this problem. It is probably the only good way you are going to solve this, considering the many inconsistencies that occur between IE and the rest of the browser community. Use a framework like JQuery to automatically set the height of the second div, that way you can be sure that the same effect will be consistent across all browsers as JQuery is cross browser compliant.
176
Make use of position: absolute, there is a trick when you specify top and bottom at the same time, basically stretching your div:
<!DOCTYPE html>
<html>
<head>
<style>
body { height: 100%; margin: 0; }
#felso { height: 100px; }
#also { position: absolute; top: 102px; bottom: 0; left: 0; right: 0; }
</style>
</head>
<body>
<div id="felso"></div>
<div id="also"></div>
</body>
</html>
Tweak it according to your specific needs. I wrote 102px for top because of the borders, which add 1px * 2 to the height of #felso.
jsFiddle Demo
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
