By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,787 Members | 1,124 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,787 IT Pros & Developers. It's quick & easy.

Two divs and the old 100% height problem

P: n/a
Hello,

Yes, I've spent hours reading through all the old postings and
searched
the net - but couldnt find a solution to the 100% height problem with
nested divs.

Basically I want the first box to be 250px high, and the one below it
to take up the rest of the browser window. I have a big div around the
lot (set to 100% height), and thought that the bottom div would fill
it up without stretching it - yet it stretches.

My code (For IE) is as follows:

<html>
<head>
<style type="text/css">

div.whole {
width:100%;
height: 100%;
border:3px solid green;
}

div.topbar {
height:250px;
width:100%;}

div.lower {
border:5px solid red;
height: 100%;
}

</style>
</head>
<body>

<div class="whole">

<div class="topbar">Top bar for logo</div>
<div class="lower">Main</div>

</div>

</body>
</html>
Thanks loads, Josh

Jan 27 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Fixed it myself, here's the code for anyone else with the same
problem:

<html>
<head>
<style type="text/css">

html body {
margin:250px 0 0 0;
padding: 0;
overflow:hidden;
}

html #top {
position: absolute;
top: 0;
width:100%;
height: 250px;
border: 5px solid red;
}

html .content {
top:180px;
border: 5px solid green;
overflow:auto;
height:100%;
}
</style>
</head>

<body>
<div id="top">Header</div>
<div class="content">Main content</div>

</body>
</html>
On Jan 27, 1:16 pm, joshthoma...@yahoo.co.uk wrote:
Hello,

Yes, I've spent hours reading through all theoldpostings and
searched
the net - but couldnt find a solution to the 100%heightproblem with
nested divs.

Basically I want the first box to be 250px high, and the one below it
to take up the rest of the browser window. I have a big div around the
lot (set to 100%height), and thought that the bottom div would fill
it up without stretching it - yet it stretches.

My code (For IE) is as follows:

<html>
<head>
<style type="text/css">

div.whole {
width:100%;height: 100%;
border:3px solid green;

}div.topbar {height:250px;
width:100%;}

div.lower {
border:5px solid red;height: 100%;

}</style>
</head>
<body>

<div class="whole">

<div class="topbar">Top bar for logo</div>
<div class="lower">Main</div>

</div>

</body>
</html>

Thanks loads,Josh
Jan 27 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.