Solution:
Use of absolute positioning. Specify the top style to be the height of your header and set bottom to 0.
Sample:
<!DOCTYPE html>
<html> <head> <title>Auto-expand body height</title> <style type="text/css"> body { height: 100%; margin: 0;position: relative;
} html { height: 100%; } html * {
box-sizing: border-box;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; } </style> </head> <body> <div style="height: 200px; border: 1px solid blue;"> </div> <div style="border: 1px solid red; position: absolute; top: 200px; bottom: 0; width: 100%;"> </div> </body> </html>
[Updated June, 2014] Or if you want a fixed footer too:
<!DOCTYPE html> <html> <head> <title>Auto Expand</title> <style type="text/css"> body { height: 100%; margin: 0; min-height: 450px; position: relative; } html { height: 100%; } html * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } </style> </head> <body> <div style="height: 200px; border: 1px solid blue;"> </div> <div style="border: 1px solid red; position: absolute; top: 200px; bottom: 100px; width: 100%;"> </div> <div style="height: 100px; border: 1px solid green; position: absolute; bottom: 0; width: 100%;"> </div> </body> </html>
These are great tips. I've been looking for a solution to my cramped layout for awhile now. Thanks for this!
ReplyDeletecalgary web design
What about a header/body/footer design? Is it possible using a similar trick?
ReplyDeleteIt should be possible. I'll research about it and update you. Thank you for visiting!
ReplyDeleteWhat about a flexible width header (not fixed as in your example)?
ReplyDeleteThis is quite clever. :D
ReplyDeleteI'm still disappointed that W3 forces people to hack CSS to be used for layout, rather than creating a layout standard that for example lets me set height=x%-of-remaining or some sort of excellent grid based layout engine like those used for Android/iOS apps. The web is more than documents, now.
It would be nice of them to implement an extension-type interface across IE, FF and CR so that the community could put together a layout module themselves; it takes too long for browser standard procedures now, they're like an aging legal system.