Div 100% height of page responsive
This question already has an answer here:
Do this!
HTML:
<div id="myDiv"> Content </div>
CSS:
#myDiv
{
min-height: 100%;
max-height: 100%;
}
The max and min height ensure that it will never occupy more or less than the height of the window (this includes if they shrink the browser to smaller than screen-height )!
:)
EDIT: Nick's comment is also incredibly important, you all parent divs including body and html must also have min-max-height set to 100%, otherwise the div will size to 100% of it's parents height.
If you want your div to have full height of the page you can do:
$('div').css('height',$('body').height());
or if you want it to be full height of the browser, do:
$('div').css('height',$(window).height());
Just execute any of these lines once the document is ready ie $(document).ready() . You can however, set the height by using height:100% in CSS by nesting the div correctly and having the right height set to its parent.
There are a couple of ways to do this.
First, you could try using height:100vh; where vh represents the viewport height. 100vh represents 100% of the viewport height. (If you ever happen to need viewport width, use vw.) This can cause problems when the element has margins, and things can get annoying.
The other method, which is probably better:
top:0;
bottom:0;
position:absolute;
This will ignore all margins and padding, and the div will take up the whole height of the screen without causing too many problems. If you need to, you can also use left:0; and right:0;
Fiddle
链接地址: http://www.djcxy.com/p/88234.html下一篇: Div 100％页面响应高度