Question

尝试更改#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;
}

Answer 1

我仍然觉得我错过了什么，但是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>

Answer 2

这可能是因为span s（因为#Leftbar）是内联元素。您应该使用display:block|inline-block，float或position:absolute|fixed才能设置width和height。

请记住，em单位与字体大小有关。

Answer 3

如果我理解你要做什么，问题是#Leftbar是一个跨度。 <span>是内嵌的。你可以：

1 - 使用<div>而不是跨度，这是一种块类型。

2 - 将CSS与自适应display一起使用，例如：

display: block;

或

display: inline-block;

希望有所帮助

第二个兄弟div元素不继承高度

3 个答案: