[英]Setting 100% on a child of body overflows the page
This is the css这是 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;
}
where #container
is a sibling of div.sections
, both directly under the body tag.其中
#container
是div.sections
的兄弟,都直接在 body 标签下。 The problem is #container
's height overflows the body by div.sections
's height.问题是
#container
的高度超出了div.sections
的高度。 I have no idea what is the problem here or if it is related to flex.我不知道这里有什么问题,或者它是否与 flex 有关。 I do know how to solve it with javascript, but I'd really like to see the solution in css.
我确实知道如何用 javascript 解决它,但我真的很想在 css 中看到解决方案。
I have tried to put a specific height value to your parent div.sections
like height: 500px;
我试图为您的父
div.sections
设置一个特定的高度值,例如height: 500px;
and this will fix your problem.这将解决您的问题。 Thanks
谢谢
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.