Question

看起来我遗漏了一些基本的东西。我希望某个DIV具有窗口的高度。效果应该是永远不需要向下滚动。

我必须使用JavaScript吗？我被告知有可能用css，但我找不到相关的属性 - 或者我做错了。

Answer 1

这是诀窍：

body { 
  margin:0; 
  padding:0; 
  height:100%; /* this is the key! */ 
}

.yourDivStyle {
  ...
  height: 100%;
}

Answer 2

如果要关闭滚动，请使用此CSS：

html, body
{
overflow: hidden;
}

但请记住，现在内容不会滚动 - 你可以把溢出：自动或溢出：滚动个别div如果你需要滚动。

如果您使用Javascript，请务必注册onresize事件，以便在调整窗口大小时更改数字。

Answer 3

让所有家长拥有height: 100%;或使用position: absolute /* or fixed */; left: 0; top: 0; width: 100%; height: 100%;。

Answer 4

我必须使用JavaScript吗？我曾是告诉我用css是可能的，但是我找不到相关的财产 - 或者我做错了。

Javascript是要走的路，你无法用css确定winodow大小，并根据窗口大小调整重新计算。

Answer 5

好的，所以在Javascript（不是jQuery或任何东西）中：

<html>
<head>
<script type="text/javascript">
<!--

 var sWidth;
 var sHeight;


 if (typeof window.innerWidth != 'undefined')
 {
      sWidth = window.innerWidth,
      sHeight = window.innerHeight
 } else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       sWidth = document.documentElement.clientWidth,
       sHeight = document.documentElement.clientHeight
 } else
 {
       sWidth = document.getElementsByTagName('body')[0].clientWidth,
       sHeight = document.getElementsByTagName('body')[0].clientHeight
 }
//VARIABLES STORED IN sWidth AND sHeight
document.write('<div style="height: '+sHeight+'; width: '+sWidth+';">CONTENT</div>');
//-->
</script>
</head>
<body>

</body>
</html>

显然你可以单独写出div ^ _ ^

html / css：将div边界框设置为窗口高度

5 个答案: