问题
I have been reading all the 100% div height discussions and I can't find a simple solution. How can I make my div take up all of the vertical height of the screen?
Here is my code:
css
#mother {
width: 100%;
margin: 0 auto;
z-index: 1;
}
#stripe_wrap {
width: 1053px;
min-height: 500px;
margin: 0 auto;
background: lime;
}
#stripe1 {
width: 39px;
min-height: 500px;
margin: 0px 0px 0px 0px;
background: #000;
float: left;
}
#stripe2 {
width: 39px;
min-height: 500px;
margin: 0px 0px 0px 0px;
background:#000;
float: right;
}
html
<div id="mother" style="overflow-x: hidden;">
<div id="stripe_wrap">
<div id="stripe1"></div>
<div id="stripe2"></div>
</div>
</div>
回答1:
You have to make the <body> tag of the height 100% as well, otherwise it is vertically truncated to fit the content.
Also make sure to put the margin of <body> to 0px, because otherwise it will become 100%_of_visible_area + margin, resulting in a vertical scroll bar.
回答2:
html, body {padding: 0px; margin: 0px; height: 100%;}
http://jsfiddle.net/kEv8F/ - my version.
http://jsfiddle.net/kEv8F/ - your version.
Is that what you meant?
回答3:
Try to set height:100% for your <body> and <html>, too.
If there is nothing except this div on your page, 100% height will be 0px without these settings.
来源：https://stackoverflow.com/questions/4280080/make-div-height-100-of-screen