全屏的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布局

回答

相关问题