Div 100％的页面高度响应 [英] Div 100% height of page responsive

问题描述

我进行了搜索，但是找不到确切的目标，无论如何，我不确定在CSS中是否有可以帮助您的jQuery脚本.

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.

我想在我的网站上创建一个div，该div填充页面的整个高度(不超过滚动条下方的区域，而仅是垂直填充的屏幕的第一个区域).我希望将其调整为设备的高度，例如在台式机和iPhone上，将整个屏幕的垂直高度都填满.

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.

我不确定是否可以发布网站，但这就是 http://alexcerezo.com

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

推荐答案

做到这一点！

HTML:

<div id="myDiv"> Content </div>

CSS:

#myDiv
{
    min-height: 100%;
    max-height: 100%;
}

最大高度和最小高度确保它永远不会占据大于或小于窗口高度的高度(这包括如果它们将浏览器缩小到小于screen-height)！

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 )!

:)

尼克的评论也非常重要，您所有的父div(包括body和html)也必须将min-max-height设置为100％，否则div的大小将为其父高的100％.

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.

这篇关于Div 100％的页面高度响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！