使浮動div擴展到頁面高度

我有兩列，一個寬度靈活，一個應擴展到剩餘寬度。我有這樣的設置是這樣的：使浮動div擴展到頁面高度

.container { 
    height: auto; 
    overflow: hidden; 
} 

.right { 
    width: 80px; 
    float: right; 
    background: #aafed6; 
    position:relative; /* Needed for positioning an element absolutely inside this dib */ 
} 

.left { 
    float: none; /* not needed, just for clarification */ 
    background: #e8f6fe; 
    /* the next props are meant to keep this block independent from the other floated one */ 
    width: auto; 
    overflow: hidden; 
}

這裏的小提琴：http://jsfiddle.net/dms53yt8/

我的問題是，我想正確的股利有同等的高度，左股利。我如何在保持當前結構的同時做到這一點？

謝謝！烏里

來源

2014-11-05 Uri Klar

http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height♦HTTP：//計算器。 com/questions/2114757/css-equal-height-columns♦http://stackoverflow.com/questions/14763363/how-to-create-equal-height-columns-in-pure-css我相信你會在SO上找到其他類似的問題。 – 2014-11-05 09:45:48

如何使用display: table爲div容器& display: table-cell兒童的div？

這裏是編輯的jsfiddle - http://jsfiddle.net/dms53yt8/4/

來源

2014-11-05 09:50:20

太棒了！我怎麼沒有想到這一點。非常感謝。 – 2014-11-05 10:14:27

此解決方案http://jsfiddle.net/ru02qxLx/

CSS附加

添加position: relative;您.container類。然後加入position: absolute;，top:0;，bottom:0;和right:0;您.right類

.container { 
    height: auto; 
    overflow: hidden; 

    /* Added */ 
    position:relative; 
} 

.right { 
    width: 80px; 
    background: #aafed6; 

    /* Added */ 
    position:absolute; 
    top:0; 
    right:0; 
    bottom:0; 
}

來源

2014-11-05 09:48:24 Nunners

您可以添加填充底和下邊距雙方的div。請檢查小提琴。

.right{ 
    padding-bottom: 500em; 
     margin-bottom: -500em; 
} 

.left{ 
    padding-bottom: 500em; 
     margin-bottom: -500em; 
}

DEMO

來源

2014-11-05 09:48:40 Haris

使浮動div擴展到頁面高度

回答

相關問題