如何将div高度设置为用户显示器分辨率的100％？

height: 100%在CSS中显然不起作用。那么有没有其他的CSS或JavaScript/jQuery解决方案来解决这个问题？请指教。如何将div高度设置为用户显示器分辨率的100％？

2011-03-03 Jacob

它可以工作，但用户必须将浏览器置于全屏模式才能真正占用整个空间。 – Dan 2011-03-03 03:40:30

CSS中的高度：100％完全按照规范中的描述工作。在这里：http://www.w3schools.com/css/pr_dim_height.asp – simon 2011-03-03 03:42:49

即使你可以通过在html，body和wrapper divs上使用100％的高度在技术上解决它，我认为有时可以设置100％的高度根据画布高度减去其他已知高度的div，然后再次检查调整大小。主要是因为在制作大量网站之后，我发现纯粹的CSS解决方案存在一些缺陷。我更喜欢基于此并通过JS进行改进。 – plebksig 2011-03-03 08:19:17

'假设你的问题元素是<div>。如果你确保你的<div>的身高有某种参照，几乎所有的问题都会消失：

#my_div 
{ 
    height: 100%; /* Won't work. What is 100% of an unknown/unset value? */ 
}

确保<div>的父母拥有一套高度了。我通常这样做（当然，不完全是，但你的想法）：

#my_div, #parent_of_the_div, body, html 
{ 
    height: 100%; /* This works, but it will show scrollbars if the body 
        or html elements have padding or margins. */ 
}

来源

2011-03-03 03:43:30 Blender

只有在您愿意将整个布局限制在显示器高度时才能使用 – thefreeman 2012-11-26 12:55:30

所以你想要一个div是屏幕的高度？这有点不明显，但CSS高度是正确的方法。诀窍是你需要让HTML和body元素占据页面的整个高度，否则div占用了100％的空间。我发现这样做的最佳方式是：

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 

#contentDiv { 
    min-height: 100%; 
}

来源

2011-03-03 03:42:00 Melv

我不认为你可以通过任何Web技术获得显示器的分辨率。你所做的就是使用Javascript来获取浏览器的高度，并在CSS中设置div的高度属性。 This post可能有助于获得高度。 '

来源

2011-03-03 03:42:10 Rasika

使用jQuery，您可以使用：

$('div.class').css('height', $(window).height()+'px');

来源

2011-03-03 05:14:58 jonwayne

我的答案建立在乔韦恩的，因为没有太多的解释。

你不能使用CSS来获取用户监视器的值，但你可以通过javascript来实现。所以诀窍是将JavaScript添加到页面加载事件中，该事件将根据浏览器窗口高度设置高度。使用jQuery，你可以用下面的代码片段

// jquery shorthand for onLoad event 
$(function() { 
    // Set the css height property of #div_to_resize to the css 
    // height property of the browser window 
    $('#div_to_resize').css('height',$(window).css('height')); 
}

您也可以选择安装到浏览器的缩放事件重置高度，如果窗口大小做到这一点。与以前的片段相结合，将是

// We extracted this to a function since we reference it more then once 
function matchHeight() { 
    $('#div_to_resize').css('height',$(window).height); 
} 

// jQuery shorthand for document.onload 
$(function() { 
    matchHeight(); 
    //On the resize event, call matchHeight() 
    $(window).resize(matchHeight); 
});

来源

2012-11-26 13:37:00 thefreeman

纯CSS

#container { 
position:absolute; 
top:0; 
right:0; 
bottom:0; 
left:0; 
}

好运

或者javacript的Jquery：

就绪（在IE8不innerHeight）：

$(document).ready(function(){ 
var heightwindow = $(document).height(); 
$('#container').css('height', heightwindow+'px'); 
});

调整窗口大小：

$(window).resize(function() { 
var heightwindow = $(document).height(); 
$('#container').css('height', heightwindow+'px'); 
});

来源

2013-07-26 15:20:51

有几个选项，你可能会发现有用：

vh (viewport height) 
vw (viewport width) 
vmin (viewport minimum length) 
vmax (viewport maximum length) 

#container{ 
height: 100vh; 
background: black; 
}

来源

2015-03-02 21:57:59

没有使用Javascript需要，becouse CSS3有大小的东西相对于当前视口大小一些新的价值观：大众， VH和VMIN

1vw = 1% of viewport width 
1vh = 1% of viewport height 
1vmin = 1vw or 1vh, whichever is smaller 
1vmax = 1vw or 1vh, whichever is larger

，所以你可以把它写在你的风格：

#contentDiv { 
    height: 100vh; 
}

来源

2015-10-27 07:36:28

如何将div高度设置为用户显示器分辨率的100％？

回答

相关问题