Hi Kevin
Try this:
The HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>This is the header area</h1>
</div>
<div id="content">
<h2>Here is the content area</h2>
</div>
</div>
</body>
</html>
The CSS
html, body, #container {
min-height: 100%;
width: 100%;
height: 100%;
}
html>body, html>body #container {height: auto;}
* {margin: 0; padding: 0;}
#container {
position: absolute;
top: 0;
left: 0;
}
#header {
height: 196px;
background-color: #f0f0f0;
}
#content {
position: absolute;
top: 196px;
bottom:0;
width: 100%;
background-color: #ffff00;
}
Cheers,
Mick
--
Pinnacle Web Design
http://www.pinnaclewebdesign.co.uk | http://twitter.com/pinnacleweb
On 14/10/2010 15:22, Kevin wrote:
Either I implemented it wrong or you misunderstood the problem, but it
doesn't work. :(
Still looking for a solution, if it's even possible.
On Oct 9, 10:25 am, Kevin<[email protected]> wrote:
Sorry I'm still somewhat confused.
As soon as I add the star hack something such as
#bottom {
top: 200px;
bottom: 0;
|
should work fine?
Thank you for the response. I will have to try this in a little bit
when I get the chance.
On Oct 6, 5:55 am, Michael Kolaski<[email protected]> wrote:
Hi Kevin
I've done this in the past - you need to use a container DIV and a 'star'
hack to fix IE. The CSS is something like:
html, body {
height: 100%;
}
#container {
min-height: 100%;
}
* html #container {
height: 100%;
}
HTH
Cheers,
Mick
--
Pinnacle Web
Designhttp://www.pinnaclewebdesign.co.uk|http://twitter.com/pinnacleweb
On 2 October 2010 16:20, Kevin<[email protected]> wrote:
#bottomhalf {
display: block;
position:absolute;
top:196px;
bottom: 0;
overflow:auto;
}
Fairly straight forward, I have a header at the top 196 pixels, and I
need #bottomhalf to fill up the rest of the page; this works fine in
Chrome, FF, but doesn't work in IE.
I've tried adding "height: 100%" to body as well as #bottomhalf and it
sort of works but because I plan to have scrollable content inside
this div, the actual div goes all the way down to 196 pixels
underneath the bottom of the window.
Only solution I can think of is creating a 100% height HTML table with
2 rows; first one being 196px and the second one filling up the rest
of the space.
--
--
You received this because you are subscribed to the "Design the Web with
CSS" at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
