我怎么能伸展一个div至100％页面高度？

StackOverflow https://stackoverflow.com/questions/951712

  •  11-09-2019
  •  | 
  •  

题 

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

        </style>

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

如何伸展div来页的100％高度？

有帮助吗？

解决方案

尝试（但应在大多数浏览器工作）：

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

其他提示

应用

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

应该得到你要找的效果。你需要它，在所有三个。

但是，通常实际上并没有做什么你认为它可能，并且可能会出现问题。人造柱技术或“粘性页脚”趋向于更好地工作。

<style>
.100PercentHeight{margin:0; height:100%}

</style>

这将工作，作为一个例子。

<div style="width:100%; height:100%; border-style:solid; border-width:5px;">
  test
</div>

如果您想通过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>

，则应该设置100％的高度的机构，它应该做的：

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

html {
    height: 100%;
}

如果你有一个DOCTYPE这是行不通的。我在寻找一个答案太多，但我有一个DOCTYPE。 然而，有一种方法用一个DOCTYPE做到这一点，但它不与两个div浮动左，右工作旁边的海誓山盟，请尝试：

(div-name) {
    position: absolute;
}

使用两个div浮动旁边的海誓山盟时，请注意，这并不是都不好看。但是，它工作正常为任何其它类型。

使用：

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

此方式，它将被居中并覆盖页面，如果它比一个浏览器视图长更长。

下面是我知道的最简单的解决方案。然而不幸的是，它不会在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>

此应该工作：

<style type="text/css">
    html, body, .100PercentHeight {
        height: 100%;
        margin: -10px 0px 0px -10px;
    }
</style>

不过，您可能需要添加背景色或边框，以确保它正常工作，否则你将不能够正确地看到它。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top