在 body 的孩子上设置 100% 会溢出页面

Question

这是 css

body, html {
    height: 100%;
    width: 100%;
}
#container {
    display: flex;
    position: absolute;
    flex-flow: column wrap;
    justify-content: stretch;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: black;
}

div.sections {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
  align-items: stretch;
  margin: 0;
  padding: 0;
  width: 100%;
  color: black;
  background-image: linear-gradient(0, orange, gold);
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

其中#container是div.sections的兄弟，都直接在 body 标签下。 问题是#container的高度超出了div.sections的高度。 我不知道这里有什么问题，或者它是否与 flex 有关。 我确实知道如何用 javascript 解决它，但我真的很想在 css 中看到解决方案。

Answer 1

我试图为您的父div.sections设置一个特定的高度值，例如height: 500px; 这将解决您的问题。 谢谢

div.sections {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
  align-items: stretch;
  margin: 0;
  padding: 0;
  height: 500px; /* Height Value as you want */
  width: 100%;
  color: black;
  background-image: linear-gradient(0, orange, gold);
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}