Css 如何将div的高度自动调整为与浏览器窗口相同的大小

如何使div标记的高度根据浏览器的高度自动调整大小？
当我做高度：100%时，它只会根据其中的文本量调整大小

这是网页，它是第一个div，蓝色背景的就是我试图使高度自动调整的div：

---

实际上，您必须缺少设置高度：100%对于父元素，也请确保使用此选项将div高度设置为100%

html, body {
   height: 100%;
   width: 100%;
}

---

height:100%

表示与父元素相同的高度，即您的

div

所在的元素。因此，如果您想使其与浏览器的高度相同，则需要将其所有祖先

100%

设置为高，直至

html

100% height - resize window problem

“高度：100%”表示浏览器窗口的100%。如果页面超出浏览器窗口（即需要滚动才能访问），则页面的这些位不在设置为“高度：100%的元素”的范围内。如果您有背景或其他效果（如边框），则不会超出前100%

The correct way to handle things is
selector {min-height: 100%;} /* for proper browsers */
* html selector {height: 100%;} /* for IE */

如果以这种方式使用minheight，则必须确保所有先行元素的固定高度为100%（即html和body）

或者可以使用Jquery

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});

$（窗口）。调整大小（函数（）{
$（'body'）.prepend（''+$（window.width（）+''）；
});

当涉及到响应性设计时，有许多创造性的方法来解决眼前的问题

您可以尝试使用百分比使您的设计更具响应性。使用百分比是最大化用户视口的安全赌注

例如

从那里，你可以玩你的网站容器和去更具体

此外，HTML头部的一些JavaScript可以帮助您检测屏幕大小并相应地调整不同的CSS规则：

<!-- hide script from old browsers
//<![CDATA[

var windowWidth=screen.availWidth;
var windowHeight=screen.availHeight

function sniffer() {
var el=document.getElementById("body"); 
if(screen.width<=600) {
           el.style.width='100%';
           el.style.height= windowHeight;
           el.style.margin="auto";               
 } 
}
onload=sniffer;
//]]>
// end hiding script from old browsers -->

上面的JavaScript正在检查用户的屏幕是否小于或等于600px；如果是，它将调整主体元素的宽度、高度和边距规则

---

希望这有帮助

就其本身而言，这在标准模式下不起作用（即使用正确的DOCTYPE）。我很确定我是对的，我做了一个q&d测试文件，但我肯定是打字错误什么的。很抱歉

<!-- hide script from old browsers
//<![CDATA[

var windowWidth=screen.availWidth;
var windowHeight=screen.availHeight

function sniffer() {
var el=document.getElementById("body"); 
if(screen.width<=600) {
           el.style.width='100%';
           el.style.height= windowHeight;
           el.style.margin="auto";               
 } 
}
onload=sniffer;
//]]>
// end hiding script from old browsers -->