Question

我需要创建我的网页，以便在缩小浏览器窗口的范围时缩小容器的高度。我已经自动调整宽度，但是我正在努力调整高度。

到目前为止这是我的脚本：

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="Opdracht4.css">
</head>   
<body>
    <div class="allcontainers"></div>
</body>
</html>

CSS

.allcontainers
{
background-color: #555;
width: 90%;
height: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 5%;
}

Answer 1

如果你总是希望窗户高度达到50％，那么你可以使用height: 50vh;

Answer 2

我认为你不能仅使用CSS来解决这个问题。我建议添加js监听器，每次调整浏览器窗口大小时都会重置css高度值。看一下 this thread

Answer 3

为了让您的示例正常工作，您需要添加到您的css： html，body { 身高：100％ }

请记住，您的元素将拥有其父（身体）高度的50％（在您的情况下）。并且身体将拥有其父级（html）的100％高度。你总是要给父母一个高度，这样你所瞄准的元素就可以与之相关。

此外，如果您希望您的元素具有真正的50％高度，请添加html，body { margin：0} - 重置浏览器默认值。

当browserwindow调整大小时，如何调整网站的高度？

3 个答案: