Question

我正在尝试使我的网站响应，而我在创建容器div时遇到问题，因为容器div的高度会响应其中的内容。我已经尝试将高度设置为100％，但它不起作用。

当我调整浏览器大小但容器没有扩展以适应它们时，大多数内容块都在彼此之下流动。

有没有人知道我在构建页面方面是否存在任何根本错误，导致我无法实现此目的？

干杯。

Answer 1

你需要清除浮子。一个例子是.mission-statement。如果在div中有多个div，则容器会自行折叠。在你的情况下，它只是部分折叠，因为你有一个最小高度设置。

您可以通过以下方式轻松完成此任务：

.mission-statement:after {
    clear: both;
    display: table;
    content: '';
}

要影响所有div，您可以将.mission-statement:after更改为div:after

Answer 2

图像将自动具有相对于宽度的图像高度100％，百分比标记是浏览器窗口的百分比。你可能想要的是一个宽度标签，可能是max-width = * px，让高度由图像本身决定。

Answer 3

不是让我给你写一个答案，我会提到一个非常好的线索。无论如何，解决方案都称为clearfix。