Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

100% div height

Tags:

html

css

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>
like image 557
Q_Mlilo Avatar asked Jan 25 '10 08:01

Q_Mlilo


2 Answers

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.

like image 155
Tom Avatar answered Oct 11 '22 07:10

Tom


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;
like image 27
Spoike Avatar answered Oct 11 '22 09:10

Spoike