The "Go" CSS implements the div's height to fill the remaining space

The "Go" CSS implements the div's height to fill the remaining space

Transferred from: http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html

Highly adaptive problem, I am very inconsistent with JS to solve, because not good maintenance, also not enough natural, but pure with CSS, difficult, such as the following I would like to say examples.

Demand:

1. The height of this rectangle is the same as the height of the browser window, the vertical scroll bar cannot appear

2. Green part height fixed, such as 50px

3. Purple partially fills the remaining height

The HTML structure is as follows:

< div id="main">      < div id="nav">nav</ div >      < div id="content">content</ div > </ div

Look at 1 first.

html, body {      height : 100% ;      margin : 0px ;      padding : 0px ; } #main {      background-color : #999 ;      height : 100% ; }

Demand 2 is also easy:

? #nav {      background-color : #85d989 ;      height : 50px ; }

Demand 3 is the most headache, generally we will think of height:100%, but 100% is based on the height of the parent element, such as the height of the parent element is 300px, #nav占去了50px, #content理应是250px, but written in height:100%, The result is that the height of the #content has also become 300%, and there is a need for a vertical scroll bar that is not allowed.

Of course, with JS to solve this problem is quite simple, but this time I just do not want to use JS, the following to try it:

This demand really let me very collapse, seemingly simple, change n way all feel not reliable, finally found a method closest to the ideal effect, as follows

html, body {      height : 100% ;      margin : 0px ;      padding : 0px ; } #main {      background-color : #999 ;      height : 100% ; } #nav {      background-color : #85d989 ;      width : 100% ;      height : 50px ;      float : left ; } #content {      background-color : #cc85d9 ;      height : 100% ; }

The use of floating here, the final result is just look no problem, of course, if you simply display text and pictures, this method is enough, but if you want to use JS to do some interaction, such as #content inside a need to drag the element, its top minimum value must not be 0, otherwise it will be # Nav blocked, the tragedy is that I have this demand, so continue to try hard force.

After a day of trying, coupled with expert guidance, finally have a solution, tears ran AH

#nav {      background-color : #85d989 ;      width : 100% ;      height : 50px ; } #content {      background-color : #cc85d9 ;      width : 100% ;      position : absolute ;      top : 50px ;      bottom : 0px ;      left : 0px ; }

The point is to use top and bottom together, which is very counter-conventional usage, can be forced to define the area of the box model, magical

The map window often encounters similar problems

The "Go" CSS implements the div's height to fill the remaining space