html - 高度尺寸和 float 元素

Question

我有调整元素大小的问题。我有一个 div 元素“.hal”，它是绝对位置，高度是 100%。在另一个元素“.wrapper”中，我有 float 元素，当我设置更多 float 元素时，.hal 元素不再对 .wrapper 的大小使用react，同样的情况也发生在 body 上。

Here is example

<div class="wrapper">
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="block yellow">2</div>
    <div class="block blue">1</div>
    <div class="fix"></div>
</div>
<div class="hal"></div>

--

.wrapper {
    float: left;
    background-color: #ffcc00;
}
.block {
    float: right;
}
.blue {
    background: #00a2e8;
    padding: 50px;
    margin-right: 50px;
}
.yellow {
    background: #fff200;
    padding: 20px 100px;
}
.hal {
    height:100%;
    width:20%;
    background-color:#333333;
    position: absolute;
}
.fix {
    clear:both;
}

Answer 1

您的 .hal 元素不在 .wrapper 中。我相信你做了一些测试。

但是，为了让它像我想的那样工作，请尝试将 .hal 元素放在 .wrapper 的顶部，并将以下内容添加到您的 .wrapper css

position:relative;