 | |
Re: Stacking DIV's and using height: 100%?
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Re: Stacking DIV's and using height: 100%? -
02-13-2008
, 02:32 AM
|
I'd like to find a way to stack two divs vertically, where the top div is a fixed height and the bottom dynamic in order to fill the remaining page height. I know this can be done by using position:absolute and using hidden divs to pad things out, but there must be a cleaner approach to this problem out there. |
need hidden divs or z-index.
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
body { position: relative }
#header { height: 96px; background-color: pink }
#content
{
background-color: palegreen;
position: absolute;
top: 96px;
bottom: 0;
left: 0;
right: 0;
}
...
<body>
<div id="header">Header</div>
<div id="content">Content</div>
</body>
#2
| |||
| |||
|
|
On 2008-02-12, Lypheus <lypheus (AT) gmail (DOT) com> wrote: I'd like to find a way to stack two divs vertically, where the top div is a fixed height and the bottom dynamic in order to fill the remaining page height. I know this can be done by using position:absolute and using hidden divs to pad things out, but there must be a cleaner approach to this problem out there. You do need position: absolute (unless you use a table), but you don't need hidden divs or z-index. html, body { height: 100%; margin: 0; padding: 0; } body { position: relative } #header { height: 96px; background-color: pink } #content { background-color: palegreen; position: absolute; top: 96px; bottom: 0; left: 0; right: 0; } ... body div id="header">Header</div div id="content">Content</div /body |
folder for odd bits and pieces on absolute position, which I need
every now and then).
I could not understand what OP meant by using the content area to
drag clippings to. I was thinking appearances were everything!
When he said,
"Looking for something very specific to start here, just have
96px tall header div and then being able to add a div below to
expand and fill the remaining height of the page (or containing
div), resizing as needed to fill out the page as it is resized."
I thought, why? Make it *look* as if it is...
--
dorayme
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.