Two divs and the old 100% height problem

J

joshthomas99

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. The first div does a 100% correctly (IE), but when I want
the second div to go from 100px to the bottom, it becomes huge if you
set it to 100% and generates a scroll bar. Any help would be gratefully
appreciated!

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:100px;
width:100%;}

div.lower {
border:5px solid red;
background-image: url('media/left back.gif');
background-repeat: repeat-y;
height: 100%;
}

</style>
</head>
<body>

<div class="whole">

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

<div class="lower">
Lower section for main text<br><br>
</div>

</div>

</body>
</html>


Thanks loads, Josh
 
R

Rob ^_^

Hi Josh,

Here is a code snippet to place a stretched background image on a page

<STYLE type=text/css>BODY {
MARGIN: 0px
}
#bg_image {
LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%
}
#contents {
Z-INDEX: 1; POSITION: absolute
}

.........


<body onload="tickClock();checkall();blurLinks()" language="javascript"
oncontextmenu="return false;" bottomMargin=0 leftMargin=0 topMargin=0
rightMargin=0 style="OVERFLOW: hidden">
<DIV id=bg_image><IMG style="WIDTH: 100%; HEIGHT: 100%"
src="Seatle.jpg"> </DIV><!-- this puts the contents of the page ontop of the
background image -->
<DIV id=logo style="position:absolute;left:0px;top:0px;width:100%">
<img src=IE7logo.gif align="right" width="165" height="156">
</DIV>

notice the Overflow:hidden attribute of the body... you can use the same in
your divs or more specifically overflow-x or overflow-y

notice also the divs are NOT nested
 
J

joshthomas99

Hello,

I've simplified the code (thanks to your nesting tip), and re-thought
the problem. The first div is now 250px, and I want the one below to
fill up the rest of the webpage - but instead of going to the end it
goes over (presumably it's height is now the height of the browser +
250px).

I tried your code, which was helpful but didnt solve the problem. Here
is my simplified code:

<html>
<head><style type="text/css">
div.top { border:5px solid green; height:250px; }
div.main { border:5px solid red; height: 100%; }
</style></head>

<body>
<div class="top">Top</div>
<div class="main">Main</div>
</body>
</html>

Josh
 
J

joshthomas99

I've worked it all out! 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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Bug on IE6 SP2 for CSS's overflow attribute 1
positioning 1
IE6 textarea height:100% BUG !!! 0
Javascript Code 1
CSS height expression crash 4
how does the footer div element stick to bottom of screen irrespective of screen height and volume o 1
XP SP2. Has display problem. 1
IE only show the first line after set innerHTML. 1

Top