Question

如何根据浏览器的高度自动调整div标签的高度？当我执行height: 100%时，它只会根据文本中的文本大小调整大小。

这是网页，它是第一个div，蓝色背景的那个是我试图让高度自动调整大小的那个：
http://rachelchaikof.com/awareness/

Answer 1

实际上你必须缺少为父元素设置height: 100%;，同时确保使用它来使你的div高度达到100％

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

Answer 2

height:100%表示与父级相同的高度，即div所在的元素。因此，如果您想使其与浏览器的高度相同，则需要制作它的所有祖先100%都很高，一直到html！

Answer 3

100% height - resize window problem

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

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

如果以这种方式使用min-height，则必须确保所有前面的元素都具有100％的固定高度（即.html＆amp; body）。

或者您可以使用Jquery。

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

Answer 4

在响应式设计方面，有许多创造性的方法可以解决手头的问题。

您可以尝试使用百分比来提高设计的响应速度。使用百分比是最大化用户视口的安全选择。

例如

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

从那里，您可以使用您的网站容器，更具体。

HTML的head部分中的一些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;如果是这样，它会调整body元素的宽度，高度，边距规则。

希望这有帮助！

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

4 个答案: