所有HTML容器是否都应具有100%的css高度

我对CSS样式

高度：100%

和页面布局感到非常困惑

我通常会将

html

，

body

，基本上每个容器都设置为

height:100%

，因为如果我想让4个元素平均分割高度，我可以将它们设置为

height:25%

。否则，他们只会占据自己内心的高度，看起来很傻。如果他们的父母没有设定为100%，那么，这根本不起作用

很好，我给每个容器

高度：100%

。但是，如果我有另一个页面可以滚动，这会产生不良影响，因为它有很多垂直内容，并且没有定义高度。是的，它仍然会滚动，但是从技术上讲，子元素现在在主容器之外，这一点在开发工具中很明显

我认为Bootstrap曾经将html和body的高度设置为100%，但现在它们不再这样做了（也许我错了）。总体而言，这是一种糟糕的设计实践吗？我应该怎么做，而不是我希望一些页面基本上不滚动，一些页面滚动

希望它有意义，这把小提琴能帮助解释我的意思

---

重要的是要了解

高度

不会限制元素的高度，如果内容不符合高度，则会溢出。通过

overflow

属性处理溢出，该属性指定了当内容溢出元素框时发生的情况

例如，向类中添加

溢出：隐藏
，将防止元素溢出：


.h100{
身高：100%；
溢出：隐藏；
}
重要的是要了解
高度
不会限制元素的高度，如果内容不符合高度，则会溢出。通过
overflow
属性处理溢出，该属性指定了当内容溢出元素框时发生的情况

例如，向类中添加
溢出：隐藏
，将防止元素溢出：


.h100{
身高：100%；
溢出：隐藏；
}
我不确定您是从哪里想到每个css元素都需要100%的高度，并且不需要在每个容器上使用。每个容器用于不同的目的，因此您需要添加适当的高度，无论是px、vh、百分比等。您可以搜索像素、百分比和视口高度，以找出哪一个最适合您的div容器。100%用于html和正文是可以的。溢出可以用overflow-x和overflow-y处理，如果您希望能够滚动浏览内容，可以使用
overflow-x：滚动
我不确定您是从哪里想到每个css元素都需要100%的高度，并且不需要在每个容器上使用它。每个容器用于不同的目的，因此您需要添加适当的高度，无论是px、vh、百分比等。您可以搜索像素、百分比和视口高度，以找出哪一个最适合您的div容器。100%用于html和正文是可以的。溢出可以用overflow-x和overflow-y处理，如果您希望能够滚动浏览内容，可以使用
overflow-x：滚动
谢谢。我没有意识到，如果没有所有家长都设置为相同的，那么
vh
就可以工作。很高兴我能帮上忙。谢谢。我没有意识到，如果没有所有的家长都设置为相同的，那么
vh
就可以工作。很高兴我能帮上忙