尝试更改#Leftbar 的大小，但如果我以像素或百分比为单位进行更改，它不会改变，所以我尝试更改父级大小，以便我可以使用百分比。由于某种原因，它适用于第一个 div 但不适用于兄弟
html
<!DOCTYPE html>
<html lang="en">
<head class="Setup">
<link rel="stylesheet" type="text/css" href="I don't want to reveal my path but it's accurate">
</head>
<body class="Setup">
<div class="Design">
<div class="TopDesign">
<p id="Topbar"></p>
<p id="Minibar"></p>
</div>
<div class="LeftDesign">
<span id="Leftbar"></span>
</div>
</div>
</body>
</html>
CSS
* {
margin: inherit;
box-sizing: inherit;
top: inherit;
left: inherit;
font-family: Menlo;
font-style: italic;
}
html {
margin: 0px 0px 0px 0px;
box-sizing: content-box;
top: 0px;
left: 0px;
}
#Topbar {
background: rgb(255, 0, 0);
width: 100%;
height: 5em;
opacity: 0.6;
}
#Minibar {
position: fixed;
background: rgb(0, 0, 255);
width: 80%;
height: 2.5em;
top: 5em;
left: 5em;
}
#Leftbar {
background: hsl(0, 0%, 0%);
width: 5em;
height: 10em;
}
最佳答案
我仍然觉得我遗漏了什么，但是 html 元素是一个空框。它本身没有高度也没有宽度。即使您定义了高度和宽度，它也就像一个没有内容且尚未用胶带粘在一起的纸板箱。
您可以通过添加 display: block 来解决这个问题。这会将盒子粘在一起，让您可以看到里面的东西。
我不会谈论你有 ems 的事实。这些让我很困惑。
* {
margin: inherit;
box-sizing: inherit;
top: inherit;
left: inherit;
font-family: Menlo;
font-style: italic;
}
html {
margin: 0px 0px 0px 0px;
box-sizing: content-box;
top: 0px;
left: 0px;
}
#Topbar {
background: rgb(255, 0, 0);
width: 100%;
height: 5em;
opacity: 0.6;
}
#Minibar {
position: fixed;
background: rgb(0, 0, 255);
width: 80%;
height: 2.5em;
top: 5em;
left: 5em;
}
#Leftbar {
background: hsl(0, 0%, 0%);
width: 5em;
height: 10em;
display: block; // ?? is this what you're trying to do??
}<div class="Design">
<div class="TopDesign">
<p id="Topbar"></p>
<p id="Minibar"></p>
</div>
<div class="LeftDesign">
<span id="Leftbar"></span>
</div>
</div>关于html - 第二个兄弟 div 元素不继承高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36878442/