全屏的CSS佈局

我想創建一個全屏的CSS佈局。全屏的CSS佈局

<div id="divLeft">LEFT is ok</div> 
<div id="divRight"> 
    <div id="divTop">TOP is ok</div> 
    <div id="divCenter">CENTER should have liquid height</div> 
    <div id="divBottom">BOTTOM should be always bottom</div> 
</div>

CSS

html{ 
    height:100% 
} 
body{ 
    height:100% 
} 
#divLeft{ 
    float:left; 
    width:70px; 
    height:100%; 
    background:#6c9; 
} 
#divRight{ 
    margin-left:70px; 
    height:100%; 
    background:#999; 
    color:#fff; 
} 
#divTop{ 
    background:red; 
    text-align:right; 
} 
#divCenter{ 
     background:blue; 
     text-align:center; 
} 
#divBottom{ 
    background:green; 
    text-align:center; 
}

Here is jsfiddle

那麼，問題出在#divCenter（應該有液體高度）和#divBottom（應在屏幕的底部總是）。

來源

2013-06-03 bonaca

像這樣的事情？ http://jsfiddle.net/gpwD4/5/ – Adrift

@SunSky嘗試與'position：absolute'和底部0px像http://jsfiddle.net/Bonaca/gpwD4/4/ ..Adrift小提琴好多了:) – swapnesh

@Adrift漂亮的工作，你應該把它作爲回答:) – Praveen

您可以通過calc()函數輕鬆實現此功能，但它不是supported below IE 9，而且移動支持非常糟糕。所有你需要做的是給#divCenter從它的兄弟姐妹的高度減去20px + 20px的高度。要讓頁腳出現在底部，您需要相對定位其包含的塊，然後絕對放置頁腳並將其放在底部（bottom: 0;）。

http://jsfiddle.net/gpwD4/6/

來源

2013-06-03 04:45:54 Adrift

假設#divTop和#divBottom有固定的高度，你可以這樣做：

#divRight{ 
    position: relative; 
} 

#divCenter{ 
    position: absolute; 
    top: (height of #divTop) 
    bottom: (height of #divBottom) 
    left:0; 
    right:0; 

} 
#divBottom{ 
    position: absolute; 
    left:0; 
    bottom:0; 
    right:0; 
}

LIVE DEMO

來源

2013-06-03 04:47:00

解決了。非常感謝。 – bonaca

全屏的CSS佈局

回答

相關問題