CSS 高度 100% 不起作用 [重复]

CSS

CSS 高度 100% 不起作用

在网页开发中，我们经常使用 CSS 来控制元素的样式和布局。其中，设置元素的高度是一个常见的需求。然而，有时候我们会遇到一个问题，就是设置 CSS 属性 height: 100% 时，却发现元素的高度并没有按照预期的方式显示。那么，为什么 CSS 高度 100% 不起作用呢？本文将探讨一些常见原因，并提供解决方案。

案例代码：

假设我们有一个包含两个子元素的容器，我们希望容器的高度能够自适应屏幕大小，并且子元素的高度能够占满容器的高度。我们可以尝试如下的 HTML 和 CSS 代码来实现这个效果：

html
<div class="contAIner">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
</div>

CSS
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.contAIner {
  height: 100%;
  background-color: lightgray;
}
.child {
  height: 100%;
  background-color: gray;
  color: white;
}

然而，当我们在浏览器中查看效果时，我们会发现子元素的高度并没有占满容器的高度。那么，为什么会出现这种情况呢？

浏览器默认样式

一个常见的原因是浏览器的默认样式。不同的浏览器可能会有一些默认的 CSS 样式，其中包括元素的 margin 和 padding 值。这些默认样式可能会影响元素的实际高度。因此，要解决这个问题，我们可以尝试将容器和子元素的 margin 和 padding 值设置为 0，以确保元素的高度计算是准确的。

CSS
.contAIner, .child {
  margin: 0;
  padding: 0;
}

父元素没有指定高度

另一个常见的原因是父元素没有指定具体的高度。如果父元素的高度没有被明确地设置，那么子元素的 100% 高度将没有参考对象。在这种情况下，子元素的高度将无法正常显示。为了解决这个问题，我们可以尝试将父元素的高度设置为一个具体的值，或者使用其他的布局方法来实现需要的效果。

CSS
.contAIner {
  height: 500px; /* 指定一个具体的高度 */
}

使用 Flex 布局

如果以上方法仍然无法解决问题，我们可以尝试使用 Flex 布局来实现元素的自适应高度。Flex 布局是一种强大且灵活的布局方式，可以轻松实现元素的自适应高度效果。

CSS
.contAIner {
  display: flex;
  flex-direction: column;
}
.child {
  flex-grow: 1;
}

以上是一些常见的解决方法，希望能帮助你解决 CSS 高度 100% 不起作用的问题。在实际开发中，还可能会有其他原因导致这个问题，需要根据具体情况进行调试和解决。