Question

我试图让容器占据桌面屏幕的整个高度。

我可以将divs的高度设置为某些像素并占据合理的高度。

但是如果在大屏幕上观看，容器的底部是可见的，这是空的空间。

我可以让容器占据所有屏幕的完整高度吗？

Answer 1

这是你想要的吗？

<html>
    <head>
        <style>
            html, body, div {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            div {
                display: block;
            }
        </style>
    </head>
    <body>
        <div>Full screen size</div>
    </body>
</html>

Answer 2

你需要的是一个粘性页脚。

html {
 position: relative;
 min-height: 100%;
}
body {
 margin: 0 0 100px; /* bottom = footer height */
}
footer {
 position: absolute;
 left: 0;
 bottom: 0;
 height: 100px;
 width: 100%;
}

了解它here。这是demo。

Answer 3

我不知道你是否需要它：fiddle

html,
body {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
div {
    height: 100%;
}

和HTML：

<div>Hello</div>

Answer 4

是的，您可以确保其位置相对于父元素，并为其所有父元素提供100％的高度。试试这个

html, body{
height:100%;
position:relative;
margin:0;
display:block;
}

.mydiv{
height:100%;
position:relative;
background:red;
display:block;
}

在IE中，如果你没有给所有父母分配100％的高度，那么孩子的div可能没有全高......

Answer 5

您可以使用vh和vw等CSS viewport units来定义与视口大小相关的维度：

div {
  height: 100vh;
}

表示“使div 100％成为视口的高度”。

body {
  margin: 0;
}

main {
  width: 50%;
  height: 100vh;
  background-color: aliceblue;
}

<main>
</main>

对于任何桌面屏幕尺寸，容器是否可以占据100％的屏幕高度？

5 个答案: