Menu
I'm looking for a way to make the div that contains my main page content to expand to fit the space left after adding my header and footer. The HTML is laid out like so:
<div id="wrapper"> <div id="header-wrapper"> <header> <div id="logo-bar"></div> </header> <nav></nav> </div> <div id="content"></div> </div> <div id="footer-wrapper"> <footer></footer> </div> It's designed so that the footer is always past the bottom of the page by setting the min-height of #wrapper to 100%. The problem is that #content doesn't expand to fill the empty space inside the #wrapper, making it difficult to get the look I want. How can I make it do that?
849
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
The height property is used to set the height of an element. The height property does not contains padding, margin and border of element. The height property contains many values which define the height of an element.
EDIT:
Why not use top and bottom. Here's a full example.
You can tweak the top and bottom values, to optimize your header/footer placement.
<html> <head> <style type="text/css"> BODY { margin: 0; padding: 0; } #wrapper { position: relative; height: 100%; width: 100%; } #header-wrapper { position: absolute; background-color: #787878; height: 80px; width: 100%; } #content { position: absolute; background-color: #ababab; width: 100%; top: 80px; bottom: 50px; } #footer-wrapper { position: absolute; background-color: #dedede; height: 50px; width: 100%; bottom: 0; } </style> </head> <body> <div id="wrapper"> <div id="header-wrapper"> <div id="header"> <div id="logo-bar">Logo</div> </div> <div id="nav"></div> </div> <div id="content">Content</div> <div id="footer-wrapper"> <div id="footer">Footer</div> </div> </div> </body> </html> 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
