Question

我有调整大小元素的问题。我有一个div元素“.hal”，它是绝对位置，高度是100％。在另一个元素“.wrapper”中，我有浮动元素，当我设置更多浮动元素时.hal元素不再对.wrapper的大小做出反应，同样的情况也与body有关。

<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;

高度大小和浮动元素

1 个答案: