如何获得高度100％的侧边栏？

Question

我有这个HTML标记：

...
    <div style="background-color: #bcceb4; width: 300px;">
        <div style="background-color: yellow; width: 100px; float: left;">1</div>
        <div style="background-color: yellowgreen; width: 200px; height: 200px; float: left;">3</div>
        <div style="clear: both;"></div>
    </div>
...

我需要黄色块来填满整个空间。高度100％和继承不起作用！

Answer 1

将高度主要div设置为例如200px并将div设置为100％高度

<div style="background-color: #bcceb4; width: 300px;height:200px">
<div style="display:inline-block; background-color: yellow; width: 100px;float: left;height:100%;">1</div>
<div style="display:inline-block; background-color: yellowgreen; width: 200px; float: left;height:100%;">3</div>
<div style="clear: both;"></div>

试试这个：

JSFIDDLE

Answer 2

将黄色块的宽度设置为100%？喜欢在：

jsFiddle

这是你的意思吗？

Answer 3

您可以使用:after并设置高度：

<强> HTML

<div style="background-color: #bcceb4; width: 300px;">
        <div class="yellowCont" style="background-color: yellow; width: 100px;float:left;">1</div>
        <div style="background-color: yellowgreen; width: 200px; height: 200px; float: left;">3</div>
        <div style="clear: both;"></div>
</div>

<强> CSS

.yellowCont:after{
    content: "";
    background-color: yellow;
    width: 100px;    
    height:175px;
    display: inline-block;
}

fiddle

Answer 4

当你指定100％或继承时，它需要引用父高度，如果你只向黄色div添加100％，它将是其父级的100％，你没有指定ehgith < / p>

为父级和主要级别与黄色级别之间的所有级别添加继承或100％高度。

示例：

div id="main" style="height:300px";> // your dynamic div
    <div style="background-color: #bcceb4;height:inherit">
        <div style="background-color: yellow; width: 100px; float: left;height:100%;">1</div>
        <div style="background-color: yellowgreen; width: 200px; height: 200px; float: left;">3</div>
        <div style="clear: both;"></div>
    </div>
</div>

Jsfiddle

Answer 5

CSS样式本质上不是100％。它本质上是自动的，意味着只需要所需的空间。你必须告诉它高度：100％其他方面它将默认为文本加上默认填充的足够空间。