2 
<html>
    <head>
        <style>
            .100PercentHeight{ }
        </style>

        </style>

    <body>
        <div class='100PercentHeight'>hihi</div>
    </body>
</html>

如何将 div 拉伸到页面的 100% 高度？

4

9 回答 9

8

尝试（它应该适用于大多数浏览器）：

.100PercentHeight, html, body {
    height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
    height : 100%;            /* Internet Explorer treats as min-height. */
    min-height : 100%;        /* Internet Explorer ignores this. */
}
于 2009-06-04T16:49:01.077 回答
6

申请

html, body, .100PercentHeight{
    height:100%;
}

应该会产生您正在寻找的效果。你需要它在所有三个。

但是，它实际上通常不会像您认为的那样做，并且可能会出现问题。假列技术或“粘性页脚”往往效果更好。

于 2009-06-04T16:47:23.437 回答
1 
<style>
.100PercentHeight{margin:0; height:100%}

</style>
于 2009-06-04T16:45:24.687 回答
1

您应该为身体设置 100% 的高度，它应该这样做：

body {
...
height:100%;
...
}
于 2009-06-04T16:46:20.037 回答
1

例如，这将起作用。

<div style="width:100%; height:100%; border-style:solid; border-width:5px;">
  test
</div>
于 2009-06-04T16:47:27.273 回答
1

采用：

{
    position: absolute;
    top: 0px;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
}

这样，如果页面长度超过一个浏览器视图，它将居中并覆盖页面。

于 2009-06-04T16:48:52.730 回答
1

如果您想通过 JavaScript 执行此操作，则此代码应该适用于大多数 DOM 浏览器...

<div id="fullDiv" style="border: solid 2px black;">
    Hello example
</div>

<script type="text/javascript">

    var div = document.getElementById('fullDiv');

    div.style.height = document.documentElement.clientHeight + 'px';

</script>
于 2009-06-04T17:10:42.627 回答
1 
html {
    height: 100%;
}

如果您有 DOCTYPE，这将不起作用。我也在寻找答案，但我有一个 DOCTYPE。但是，有一种方法可以使用 DOCTYPE，但它不适用于两个左右浮动的 div，请尝试：

(div-name) {
    position: absolute;
}

请注意，当使用两个相邻浮动的 div 时，这看起来一点也不好看。但是，它适用于任何其他类型。

于 2012-06-27T04:25:16.653 回答
1

这是我所知道的最简单的解决方案。然而不幸的是，它在 Internet Explorer 8 和更早版本中不起作用，因为它们不支持 vh（视口高度）单位。

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0;
}

#full-height{
  min-height: 100vh;
}
</style>
</head>
<body>
<div id='full-height'>

</div>
</body>
</html>
于 2016-06-13T03:13:04.200 回答