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