子div 100％身高父母汽車高度

我在這裏，因爲其他類似的問題不能幫助我的特殊問題。子div 100％身高父母汽車高度

我需要right div始終爲100％身高，其中parent身高取決於left div身高，這取決於裏面的內容。

下面是HTML：

<div class="container clearfix"> 
<div class="left"></div> 
<div class="right"></div> 
</div>

這裏是CSS：

.container{ 
    min-height: 10px; 
    width: auto; 
    height: auto; 
    background-color: #eeeeee; 
} 

.left{ 
    position: relative; 
    float: left; 
    min-height: 100px; 
    width: 50px; 
    background-color: #dddddd; 
} 

.right{ 
    min-height: 20px; 
    position: relative; 
    float: left; 
    height: 100%; 
    width: 50px; 
    background-color: #dddddd; 
} 

. 

.clearfix:after 
{ 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
.clearfix { 
    display: inline-block; 
}

注：
我使用clearfix。
如果你能表現出jsfiddle

你的答案這裏是的jsfiddle http://jsfiddle.net/C9Kmx/32/

來源

2012-07-10 skmasq

通過其他的解決方案閱讀您的意見很清楚，我只爲你的解決方案是實現一些JS到你的代碼。但這不是問題。

http://jsfiddle.net/b7TuP/

來源

2012-07-14 15:47:11 sed

，我只看到一個解決方案，它包含了js，所以基本上不可能用普通的css來完成。 – skmasq 2012-07-19 15:27:17

給position:fixed和height:100%爲正確的股利。這將解決您的問題。

來源

2012-07-10 08:46:11 aneeshraj

你能告訴我的jsfiddle，因爲我不明白爲什麼沒有爲我工作 – skmasq 2012-07-10 11:15:36

http://jsfiddle.net/aneeshrajvj/J8qTB/ – aneeshraj 2012-07-11 03:44:08

你可以看到它跨越了parrent div。這不是我想要的。我希望它在裏面。 – skmasq 2012-07-14 15:28:18

做出正確的div position:absolute;並使父div position:relative;然後height:100%;將爲正確的div工作。確保你也相應地調整它的x位置和寬度。在這個例子中，我給了它一個left:50px以確保它出現在左列的右側。

的jsfiddlehttp://jsfiddle.net/e9mvD/

來源

2012-07-10 08:46:37 tb11

我不能給它左：50px，因爲with會是相對的 – skmasq 2012-07-10 09:59:21

在這種情況下，你可以在容器div上設置一個固定的寬度，然後在絕對位置的右分區上使用'right：0'， div也是一個寬度。 – tb11 2012-07-10 18:30:10

這個解決方案對我來說最合適。因爲它不會對左側和右側元素施加任何其他限制，所以此選項必須包含javascript – Kiee 2014-01-07 17:31:32

可以使用display屬性的table-cell值在此佈局並刪除float是這樣的：通過給

.left, .right{ 
    display:table-cell; 
}

現場演示http://jsfiddle.net/C9Kmx/34/

來源

2012-07-10 08:48:09

+1這是最佳解決方案。 – techfoobar 2012-07-10 08:56:16

此屬性使用最低高度，基本上如果我使用100％高度沒有「正確」它只是崩潰。 – skmasq 2012-07-10 11:17:06

這是一個很好的解決方案。謝謝 – 2015-12-11 18:40:11

嘗試容器高度固定值

這也將解決這個問題。只是試圖在的jsfiddle

http://jsfiddle.net/C9Kmx/35/

.container 
{ 
    min-height: 10px; 
    width: auto; 
    height: 100px; 
    background-color: #eeeeee; 
}

來源

2012-07-10 08:55:42 Narendra

如前所述，目前我無法修復 – skmasq 2012-07-10 10:01:14

你可以做到這一點使用Flexbox的一些創意。

.container { 
 
    display: flex; 
 
    background: black; 
 
    padding: 5px; 
 
    width: 300px 
 
} 
 

 
.left { 
 
    height: 200px; 
 
    flex: 1 0 0px; 
 
    background: blue; 
 
} 
 

 
.right { 
 
    flex: 1 0 0px; 
 
    overflow: auto; 
 
    background: green; 
 
} 
 

 
.column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 20%; 
 
}

<div class="container"> 
 
    <div class="left"></div> 
 
    <div class="column"> 
 
    <div class="right"></div> 
 
    </div> 
 
</div>

來源

2016-12-28 22:38:52 Spencer

我同意，但由於IE11仍然支持，它與Chrome和Firefox如何實現flexbox有一些嚴重的不一致。作爲flexbox的點有其侷限性，直到IE11被丟棄。 – skmasq 2017-01-13 11:05:04

子div 100％身高父母汽車高度

回答

相關問題