我在使用 CSS 时遇到了问题。
我已经有很长时间没有使用 css 了，但现在我正在努力做一些非常简单的事情，你可能会说。
嗯，问题是我创建了一个高度为 1100 像素的 div，在该 div 中我还有两个 div，其中一个在顶部，另一个在上面的 div 正下方。 上面的div没有指定高度，只是使用padding来获取高度。下部 div 的高度设置为 100%，所以它(基本上)应该获得父 div 中剩余的高度，不是吗？
此时，下方的div与父div重叠。
这是我的代码:
html, body {
background: #121212;
color: #ffffff;
font-family: 'Open Sans', sans-serif;
}
* {
margin: 0;
padding: 0;
}
#container {
margin: 5% auto;
width: 1100px;
height: 600px;
background: #ff9900;
}
#container .inner-box-head {
font-style: italic;
padding: 5px 0px 5px 0px;
}
#container .inner-box {
height: 100%;
}
#container .inner-box .inner-box-video {
width: 70%;
height: 100%;
background: #fff;
} <!DOCTYPE html>
<html lang="cs">
<head>
<title>jadvo.cz</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="inner-box-head">
Diváků: 0
</div>
<div class="inner-box">
<div class="inner-box-video">
<!--<iframe width="560" height="315" src="https://www.youtube.com/embed/7JJfJgyHYwU?rel=0&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>-->
</div>
<div class="inner-box-chat">
</div>
</div>
</div>
</body>
</html>
最佳答案
And the lower div has height set to 100%, so it (basically) should get the height thats left in the parent div, shouldnt it?
没有。它应该与父级具有相同的高度。 100% 表示父级高度的 100%，而不是未被其他东西使用的父级高度的 100%。
At this time, the lower div is overlapping the parent div.
事实并非如此。 100% 高度的 div 太大而不适合其父级，因此它伸出父级，从而影响到下面的空间。
如果你想要用完剩余空间的元素:使用Flexbox做你的布局。
section {
display: flex;
flex-direction: column;
height: 200px;
margin: 1em auto;
max-width: 100px;
}
section header {
flex: 0 0 auto;
background: #faa;
padding: 1ex;
}
section div {
flex: 1 1 auto;
background: #aaf;
padding: 1ex;
}
section footer {
flex: 0 0 auto;
background: #afa;
padding: 1ex;
}<section>
<header>Header</header>
<div>Content</div>
<footer>Footer</footer>
</section>
<section>
<header>Header</header>
<div>Content</div>
<footer>Footer</footer>
</section>
<section>
<header>Header</header>
<div>Content</div>
<footer>Footer</footer>
</section>
<section>
<header>Header</header>
<div>Content</div>
<footer>Footer</footer>
</section>关于html - 子div没有得到父div的原始高度，为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52152442/