Question

我在使用CSS时遇到麻烦。

自从我使用CSS以来已经有很长时间了，但是现在您可能会说，我正在努力做一些非常简单的事情。

好吧，我创建了一个高度为1100px的div，并且在div内还有两个div，其中一个位于顶部，另一个位于上div的正下方。上层div没有指定高度，而仅使用填充来获取高度。而且较低的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&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>-->
    				</div>
    				
    				<div class="inner-box-chat">
    				
    				</div>
    			</div>
    		</div>
    	</body>
    </html>

Here you can see the result I'm getting...

Answer 1

并且较低的div的高度设置为100％，因此（基本上）应该获得父div中剩余的高度，不是吗？

不。它的高度应与父代的高度相同。 100％表示父项的高度的100％，而不是其他未使用的父项的高度的100％。

这时，下div与父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>

Answer 2

您最常使用calc()，因为.inner-box-head的高度会影响父级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: calc(100% - 32px)
}
#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&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>-->
                </div>

                <div class="inner-box-chat">

                </div>
            </div>
        </div>
    </body>
</html>

Answer 3

以此更新您的最后一个CSS块：

#container .inner-box .inner-box-video {
    width: 70%;
    height: calc(100% - 10px);  //5+5 padding of top div
    background: #fff;
}

子div没有达到父div的原始高度，为什么？

3 个答案: