如何獲得100％高度的浮動div始終保持100％

Question

我有一個100％高度的左浮球和100％的右浮球。一切正常，直到我用文字填充一面，另一面就停止。

我該如何解決這個問題？

Answer 1

您可以在爲兩列插入父代div後使用css表。例如：

你的HTML：

<div id="parent"> 
    <div id="leftcolumn"></div> 
    <div id="rightcolumn"></div> 
</div> 

你的CSS：

#parent{display:table-row} 
#leftcolumn{display:table-cell} 
#rightcolumn{display:table-cell} 

Answer 2

裹在position: relative一個封閉的div浮動的div，然後給人留下浮球position: absolute以確保它去至底部。

左浮動div需要一個參考高度來開始。外圍div允許100％高度的div取整個容器的高度。

我已將正確的浮點數更改爲float: right，並給出標題爲z-index: 2。

View on jsFiddle

Answer 3

嘗試用下面的代碼。

在HTML

<div class="content"> 
<!-- Start UI Leftside --> 
    <div class="ui-leftside"> 
     <div class="ui-cont"> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p> 
     </div> 
    </div> 
<!-- End UI Leftside --> 
<!-- Start UI Rightside --> 
    <div class="ui-rightside"> 
     <div class="ui-cont"> 
      <p>Add Text here how long you want</p> 
     </div> 
    </div> 
    <div class="clear"></div> 
<!-- End UI Rightside --> 
</div> 

在CSS中，

.content { 
    position: absolute; 
} 

.ui-leftside { 
    background: none repeat scroll 0 0 #F7F7F7; 
    float: left; 
    height: 100%; 
    margin: 0; 
    min-height: 100%; 
    padding: 0; 
    position: absolute; 
    width: 25%; 
} 

.ui-cont { 
    margin: 0; 
    padding: 60px 0 10px; 
} 


p { 
    margin: 0; 
    padding: 0; 
} 


.ui-rightside { 
    background: none repeat scroll 0 0 #999999; 
    float: right; 
    height: 100%; 
    margin: 0; 
    min-height: 100%; 
    padding: 0; 
    width: 75%; 
}