如何使浮動元素達到100％的高度？

Question

我有以下的HTML標記：

.container { 
 
    border: 1px solid green; 
 
} 
 
.right { 
 
    border: 1px solid #000; 
 
    float: right; 
 
    width: 40px; 
 
} 
 
.left { 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <div class="right">Right</div> 
 
    <div class="left-container"> 
 
    <div class="left"> 
 
     Left fluid 
 
     <br/> 
 
     multiple rows 
 
    </div> 
 
    </div> 
 
</div>

正如你可以看到右擋長相醜陋。我怎樣才能使元件流體高度達到100％？

Answer 1

添加規則height:100%右格，並刪除float:right。我將其更改爲position:absolute，以便您不需要容器的高度。

.container { 
 
    border: 1px solid green; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.right { 
 
    border: 1px solid #000; 
 
    width: 40px; 
 
    height: 100%; 
 
    position: absolute; 
 
    right: 0; 
 
} 
 
.left { 
 
    display: block; 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
    margin-right:40px; 
 
}

<br><br><div class="container"> 
 
    <div class="right">Right</div> 
 
    <div class="left-container"> 
 
    <div class="left"> 
 
     Left fluid 
 
     multiple rows a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence. 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

加上明確：兩者;浮動元素後。

<div class="right"></div> 
<div style="clear: both"></div> 

Answer 3

如果您的應用程序將在一個現代瀏覽器中運行，然後使用Flexbox將是一個很好的路要走：http://jsfiddle.net/2hn9zgog/。

HTML：

<div class="container"> 
    <div class="right">Right</div> 
    <div class="left"> 
     Left fluid 
     <br/>multiple rows 
    </div> 
</div> 

CSS：

.container { 
    display: flex; 
    width: 100%; 
    outline: 1px dotted gray; 
} 

.right { 
    order: 2; 
    flex: 0 0 auto; 
    border: 1px solid green; 
} 

.left { 
    flex: 1 0 auto; 
    border: 1px solid red; 
} 

Answer 4

添加

html, body{ 
height: 100%; 
min-height: 100%; 
} 

.your-container{ 
height: 100%; 
}