CSS/HTML 2列在左邊的列粘頁腳

-2

我想創造這樣的事情：CSS/HTML 2列在左邊的列粘頁腳

Image 1 http://i59.tinypic.com/egd8a9.png

我需要兩列：右側欄將是應採取滑塊50%的頁面寬度和100%的height。在左邊的內容區域應該滾動（我使用的是iFrame），並且頁腳應該粘在頁面的底部（我用bottom:0來定位它）。

現在的問題是，我不希望給內容的fixed height，但頁腳應始終200px，所以如果窗口的高度變小，應該是這樣的：

Image 2 http://i61.tinypic.com/10ero1x.png

任何想法，我可以做到這一點？

來源

2014-04-02 user3489390

您可以發佈您的代碼？或者創建一個[JSFiddle]（http://www.jsfiddle.net）？ –

http://jsfiddle.net/9HE3h/1/ - >你看不到結果，因爲我使用了兩個外部文件。但至少你可以看到代碼更好一點...希望這有助於。 – user3489390

就像這樣：http://jsbin.com/masokalo/4/edit?html,css,output – Lipis

喜歡的東西：http://jsfiddle.net/PFcUa/？

我用鈣：

.cutter { 
    background: orange; 
    position: relative; 
    overflow-y: scroll; 
    height: calc(100% - 200px); 
}

所以它只能IE9 +

來源

2014-04-02 13:02:32

啊！完善！像魅力一樣工作！非常感謝，喬納斯！ – user3489390

CSS：

column { 
    display:inline-block; 
    vertical-align:top; 
} 

#left, #right{width: 50%;} /* more or less depends on the margin */ 
#footer{height:200px;}

HTML

<div> 
    <div id = 'left' class = 'column'> 
     <div id = 'content'> 
     <div id = 'footer'> 
    </div> 
    <div id = 'right' class = 'column'></div> 
</div>

來源

2014-04-02 12:58:56 Gwenc37

CSS/HTML 2列在左邊的列粘頁腳

回答

相關問題