有兩列和一個頁腳的液體佈局

Question

我試圖建立一個有兩列和底部固定頁腳的液體佈局。我已經在這裏得到了一些幫助，我上面有一個例子。

http://jsfiddle.net/kpDDM/18/

在我的例子的問題是，它有一個固定的高度。當我對內容div感到滿意時，內容會崩潰。

Answer 1

你需要的是這樣的：http://jsfiddle.net/kpDDM/44/

HTML

<div class="all"> 
    <div class="content"> 
     <div class="left">&nbsp;</div> 
     <div class="right">&nbsp;</div> 
    </div> 
    <div class="footer"></div> 
</div> 

CSS

.all { 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 

body,html{ 
    height:100%; 
} 

.content { 
    display:inline-block; 
    height: 90%; 
    width: 100%; 
} 

.left { 
    display: inline-block; 
    float: left; 
    width: 60%; 
    height: 100%; 
    background-color: red; 
} 

.right { 
    display:inline-block; 
    float: left; 
    width: 40%; 
    height: 100%; 
    background-color: blue; 
} 

.footer { 
    display: inline-block; 
    width: 100%; 
    height: 10%; 
    background-color: green; 
} 

說明

的問題是，body標籤沒有100 ％本身。你必須把它分配給身體，然後它會工作。在上面的例子中，我假定內容+頁腳共享高度的100％。 90％+ 10％