高度尺寸和浮動元素

Question

我有調整大小元素的問題。我有一個div元素「.hal」，它的絕對位置和高度是100％。在另一個元素「.wrapper」中，我已經浮動了元素，當我設置更多浮動元素時.hal元素不再對.wrapper的大小發生反應，同樣的情況也與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;