Lypheus
02-12-2008, 03:56 PM
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.
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.
Below is something that does not work but shows basically what I want to achieve here. As you can see by saving this and previewing it in a browser, the lower (body) div causes scrolling on the webpage which is what i'm trying to avoid here.
Tried using position:absolute and Z indexes with some success, but this is a big kludgy when you consider i'll be dynamically adding draggable windows inside this div, which serves as a "workspace" of sorts.
Javascript might work here I suppose, the approach being to capture viewport resize events and calculate the new height via JS, but this seems fragile for diff browsers and kludgy as well.
Anyone have some ideas?
<html>
<head>
<title>DDS</title>
</head>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
border: 0;
}
div#canvas {
background-color: lightyellow;
width: 100%;
height: 100%;
}
div#header {
background-color: lightgray;
width: 100%;
height: 196px;
vertical-align: top;
}
div#body {
background-color: darkgray;
width: 100%;
height: 100%;
}
</style>
<body>
<div id="canvas">
<div id="header">head</div>
<div id="body">body</div>
</div>
</body>
</html>
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.
Below is something that does not work but shows basically what I want to achieve here. As you can see by saving this and previewing it in a browser, the lower (body) div causes scrolling on the webpage which is what i'm trying to avoid here.
Tried using position:absolute and Z indexes with some success, but this is a big kludgy when you consider i'll be dynamically adding draggable windows inside this div, which serves as a "workspace" of sorts.
Javascript might work here I suppose, the approach being to capture viewport resize events and calculate the new height via JS, but this seems fragile for diff browsers and kludgy as well.
Anyone have some ideas?
<html>
<head>
<title>DDS</title>
</head>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
border: 0;
}
div#canvas {
background-color: lightyellow;
width: 100%;
height: 100%;
}
div#header {
background-color: lightgray;
width: 100%;
height: 196px;
vertical-align: top;
}
div#body {
background-color: darkgray;
width: 100%;
height: 100%;
}
</style>
<body>
<div id="canvas">
<div id="header">head</div>
<div id="body">body</div>
</div>
</body>
</html>