Div 100% height of page responsive [duplicate]

问题

I have had a search but can't find exactly what I want to achieve, in CSS anyway I'm not sure if there could be a jQuery script that could help.

I want to create a div on my website which fills the entire height of the page (no further than the area below the scroll just the first area of the screen filled vertically). I want this to adjust to the height of device so on a desktop and iPhone for example the whole screen vertical height is filled.

I'm not sure if I can post websites but this is the look I'm after http://alexcerezo.com

回答1:

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.

回答2:

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 i.e $(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.

回答3:

There are a couple of ways to do this.

First, you could try using height:100vh; where vhrepresents 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

来源：https://stackoverflow.com/questions/24169728/div-100-height-of-page-responsive

标签

jquery

css

responsive-design