0

如何根据浏览器的高度自动调整 div 标签的高度？
当我这样做时height: 100%，它只会根据里面有多少文本来调整大小。

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

4

4 回答 4

2

实际上，您必须height: 100%;为父元素设置一个，还要确保使用它来使您的 div 高度为 100%

html, body {
   height: 100%;
   width: 100%;
}
于 2012-12-08T07:51:39.843 回答
0

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

于 2012-12-08T07:52:02.367 回答
0 
100% height - resize window problem

"height:100%" 表示浏览器窗口的 100%。如果页面超出浏览器窗口（即需要滚动才能访问），页面的这些位在设置为 height: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 和 body）。

或者你可以使用 Jquery。

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});
于 2012-12-08T07:53:11.013 回答
0

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

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

例如。

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 元素的宽度、高度、边距规则。

希望这可以帮助！

于 2012-12-08T09:38:43.300 回答