Geek Answers Handbook

100% height

Hello everybody

I am designing a web page with a fluid layout. I want to keep 100% width and 100% height. The problem is that I don’t know how to keep the divs "left" and "right" with 100% height inside the 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.

Reply 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>
+5
source share
4 answers

If I understand correctly, do you want to float divs left and right inside your div shell, but keeping the full shell div full height on the screen?

If so, the right and left divs, of course, go into the shell, and you use {... float: left; position: relative;} and {... float: right; position: relative;} to swim on their sides.

, div, div, . , div " ". , div , :

  • div : <div style="clear: both;"></div>
  • div (, span) CSS {... clear: both;}

" ", .

, , , , , CSS, , . : http://ryanfait.com/sticky-footer/

, .

+10

100% , . , , header wrapper .

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

? :

, .

, float ?

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

div 100% , 100%. css:

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

try adding

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

0
source

More articles:


All Articles