Menu
So I have a webpage with a header, mainbody, and footer. I want the mainbody to fill 100% of the page (fill 100% in between footer and header) My footer is position absolute with bottom: 0. Everytime I try to set the mainbody to 100% height or change position or something it will also overflow the header. If if set the body to position absolute with top: 40 (cause my header is 40px high), it will just go 40px too far down, creating a scroll bar.
I created a simple html file since i cannot actually post the entire page/css from the actual project. With the sample code, even though the maincontent body fills the screen, it goes 40px too far down (cause of the header I assume).
html, body { margin: 0; padding: 0; } header { height: 40px; width: 100%; background-color: blue; } #maincontent { background-color: green; height: 100%; width: 100%; } footer { height: 40px; width: 100%; background-color: grey; position: absolute; bottom: 0; }<html> <head> <title>test</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <header></header> <div id="maincontent"> </div> <footer></footer> </body> </html>Anyone knows the answer?
600
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.
We found a solution! We add position:absolute;height:100%;width:100%; to the body tag and then our div gets on the whole screen without positioning attribute :) just height:100% and width:100%.
These are not necessary
Stretch div using bottom & top :
.mainbody{ position: absolute; top: 40px; /* Header Height */ bottom: 20px; /* Footer Height */ width: 100%; } check my code : http://jsfiddle.net/aslancods/mW9WF/
or check here:
body { margin:0; } .header { height: 40px; background-color: red; } .mainBody { background-color: yellow; position: absolute; top: 40px; bottom: 20px; width:100%; } .content { color:#fff; } .footer { height: 20px; background-color: blue; position: absolute; bottom: 0; width:100%; }<div class="header" > </div> <div class="mainBody"> <div class="content" >Hello world</div> </div> <div class="footer"> </div>No Javascript, no absolute positioning and no fixed heights are required for this one.
Here's an all CSS / CSS only method which doesn't require fixed heights or absolute positioning:
/* Reset */ html, body { height: 100%; margin: 0; padding: 0; } /* Essentials */ .container { display: table; } .content { display: table-row; height: 100%; } .content-body { display: table-cell; } /* Aesthetics */ .container { width: 100%; height: 100%; } .header, .footer { padding: 10px 20px; background: #f7f7f7; } .content-body { padding: 20px; background: #e7e7e7; }<div class="container"> <header class="header"> <p>This is the header</p> </header> <section class="content"> <div class="content-body"> <p>This is the content.</p> </div> </section> <footer class="footer"> <p>This is the footer.</p> </footer> </div>The benefit of this method is that the footer and header can grow to match their content and the body will automatically adjust itself. You can also choose to limit their height with css.
28
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
