Div高度百分比，半父母高度

Question

我有兩個div彼此相鄰顯示，左div是20%寬度，右是80%寬度。

現在左div包含圖像水平調整大小，所以它的高度是未知的，並不斷變化。

現在，當這個div調整父母高度增加或減少，所以當這種情況發生時，我需要我的權利調整，以及我怎麼做？

jsFiddle

Answer 1

你可以使用jQuery來做到這一點。

$('.container').css({'height':$('.one').height()});​ 

See a jsFiddle here

當您更改的.one在CSS的價值，它將更新的.container的大小，因此.two爲好。

Answer 2

您可以嘗試在display屬性CSS3 table-cell值：http://jsfiddle.net/UJYyw/5/

隨着

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 

你只需要申請上div.one一個table-cell顯示和div.two

.one, .two{ 
    display:table-cell; 
} 

兼容瀏覽器將根據它們在td和th標籤上的操作方式調整元素的高度。

Answer 3

這裏是一個僅使用浮空，跨瀏覽器的解決方案夫婦包裝的http://jsfiddle.net/RSPbD/

HTML

<div class="container"> 
    <div class="wrap1"> 
     <div class="wrap2"> 
      <div class="one">text in div one</div> 
      <div class="two">text in div two</div> 
      <div class="clear"></div> 
     </div> 
    </div> 
</div>​ 

CSS：

.container{ 
    border:1px solid; 
    width:70%; 
    margin:50px; 
    padding:10px; 
} 

.wrap1 { 
    width: 25%; 
    background: red; 
    position: relative; 
    left: 7%; 
} 

.wrap2 { 
    width: 200%; 
    position: relative; 
    left: 100%; 
    margin:0 -200% 0 0; 
    background: blue; 
} 

.one{ 
    float: left; 
    width: 50%; 
    margin-right: -100%; 
    position: relative; 
    left: -50%; 
} 

.two { 
} 

.clear { 
    clear: both; 
    font-size: 0; 
    overflow: hidden; 
}