当浏览器窗口调整大小时，如何调整网站的高度？答案

【问题标题】：how can i make the height of a website resize when browserwindow resizes?当浏览器窗口调整大小时，如何调整网站的高度？
【发布时间】：2015-06-18 11:16:07
【问题描述】：

我需要制作我的网页，以便在我缩小或放大浏览器窗口时调整容器的高度。我已经自动调整了宽度，但我正在努力调整高度。

这是我目前的脚本：

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%;
}

【问题讨论】：

建议你看看Bootstrap：getbootstrap.com
在您的情况下，您必须将 html 和 body 的高度提高到 100%。

标签： html css browser window

【解决方案1】：

为了让您的示例能够正常工作，您需要在 CSS 中添加： html，正文 { 高度：100% }

请记住，您的元素将具有其父级（主体）高度的 50%（在您的情况下）。并且主体将具有其父级 (html) 的 100% 高度。你总是必须给父母一个高度，这样你的目标元素就可以与之相关。

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

【讨论】：

【解决方案2】：

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

【讨论】：

我不擅长 js。所以我会把那架飞机飞走。我目前正忙于学习html和css，我知道可以用css解决。
在他的例子中 height: 50% in class .allcontainers 并不意味着浏览器窗口的 50%。我认为这就是他遇到问题的原因

【解决方案3】：

如果您总是想要窗口高度的 50%，那么您可以使用height: 50vh;

【讨论】：

好吧。这对我有用。感谢您的快速回复。
欢迎您。我建议您也尝试 Ruddy 的建议，为所有父元素添加 100% 高度（如果您想要全高），在 IE 中如果您不这样做可能会成为问题。此外，使用“vh”并不总是可行的，这完全取决于您要完成的工作。祝您好运！
我只是在摆弄不同大小的 div 并试图调整它们以调整浏览器的大小并让它们站在中间。但这将为此工作