时间戳

首页 > 解决方案 > 在 body 的孩子上设置 100% 会溢出页面

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

问题描述

这是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 中看到解决方案。

标签： cssflexbox

解决方案

我试图为您的父母设置一个特定的高度值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;
}

推荐阅读