如何自动调整div的高度至浏览器窗口的高度

如何根据浏览器的高度自动调整div标签的高度？
当我做height: 100%时，它只根据文本内容的大小来调整大小。如何自动调整div的高度至浏览器窗口的高度

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

2012-12-08 user1869585

其实你必须失去了设置的height: 100%;的父元素，还要确保您使用此，让您的div高度100％

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

来源

2012-12-08 07:51:39

本身，这不适用于标准模式（即使用适当的DOCTYPE）。 –

@MrLister它确实有效，谁说没有？ –

@MrLister检查了这个http://jsfiddle.net/3RTBU/ –

height:100%意味着相同的高度父，也就是元素的div坐在所以，如果你想它一样高t作为浏览器，你需要将其全部的祖先100%设置为高，一直到html！

来源

2012-12-08 07:52:02

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 */

如果以这种方式使用最小高度，你必须确保所有的前提要素具有的100％（即HTML &体）的固定高度。

或者你可以使用jquery。

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

来源

2012-12-08 07:53:11 Moiz

当谈到响应式设计时，有很多创造性的方法来解决这个问题。

您可以尝试使用百分比来使您的设计更具响应能力。使用百分比是使用户视口最大化的安全选择。

例如。

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

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

而且一些JavaScript的HTML的头部部分可以帮助您检测屏幕尺寸，并相应地调整不同的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元素的宽度，高度和边距规则。

希望这会有所帮助！

来源

2012-12-08 09:38:43

如何自动调整div的高度至浏览器窗口的高度

回答

相关问题