CODEWITHSUNDEEP
htmlcss
Q_Mlilo
Q_Mlilo

Reputation: 1787

100% div height

Hie Everyone

I am designing a webpage with a fluid layout. I want to keep a 100% width and a 100% height. The problem is i dont know how to keep divs "left" and "right" with a 100% height inside their parent div, "wrapper".

<div id="container" style="width:100%; height:100%">  
     <div id="header" style="width:100%; height:100px">
     </div>

     <div id="wrapper" style="width:100%; height:(100% - 100px)">
           <div id="left" style="width:250px; height:(100% - 100px)">
           </div>

           <div id="right" style="width:(100% - 250px); height:(100% - 100px)">
           </div>           
     </div>          
</div>

Please help.

Answer from doctype.com

CSS

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<body>
<div id="container" style="width:100%; height:100%; position: absolute;">  
  <div id="header" style="width:100%; height:100px;">
header
  </div>
  <div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;">
    <div id="left" style="width:250px; height:100%; float:left;">
    left
    </div>
    <div id="right" style="width: 250px; height:100%; float:right; ">
    right
    </div>           
    main content
  </div>          
</div>
</body>

Upvotes: 5

Views: 10021

Answers (4)

Tom
Tom

Reputation: 30698

If I'm understanding correctly, you want to float divs right and left inside your wrapper div, but retaining the wrapper div's full height in the screen?

If so, the right and left div of course go inside the wrapper, and you use { ... float: left; position: relative;} and {... float: right; position: relative;} to float them to the sides.

Now, because you've floated these two divs which are part of the content of your wrapper div, the wrapper itself may have zero height. This is because the two divs inside "float out of it". To give your wrapper the same height as the two divs inside have, you can EITHER:

  • put this as a third div inside your wrapper: <div style="clear: both;"></div> OR
  • put any element inside your wrapper after the two divs (like a span) and give it a CSS property of {... clear: both;}

Now you've "cleared the floats" and your wrapper has the full height of the two divs inside.

IF ON THE OTHER HAND, you want all your content to stretch to the full height of the screen always without regard to what you've put in there, you'll need to do some CSS magic and it gets too complicated to explain without seeing your code. Start here: http://ryanfait.com/sticky-footer/

Hope that helps.

Upvotes: 10

Spoike
Spoike

Reputation: 121742

If you make all elements in the same level be 100% width and height you'll get unexpected behavior between browsers. With the example you've given you're trying to give header and wrapper all the space within the parent.

100% container
+----------------------------+
| 100% header  100% wrapper  |
| +----------+ +-----------+ |
| |         errr...?       | |
| +----------+ +-----------+ |
+----------------------------+

How is that supposed to be possible really? There are several ways of doing this either:

  • the first element gets all the space or,
  • both have to overlap or,
  • they both share the space

So you need to be more specific when giving percentages.

By the way have you tried floating your elements?

position: relative; // or absolute
float: left;

Upvotes: 3

poke
poke

Reputation: 387527

To have a div with 100% height of the browser, the parent needs to have a 100% height as well. Try adding the following css:

html, body { height: 100%; margin: 0; padding: 0; }

Upvotes: 2

ant
ant

Reputation: 22948

try adding

min-height:100%; to your css, chk out this example

Upvotes: 0

Related Questions