如何用CSS构建这个布局？ [英] How to build this layout with CSS?

问题描述

我不是CSS的新手，但这是我的问题，我不能解决它。我需要构建如下布局：

I'm not new at CSS, but this is problem for me and I can't solve it. I need to build layout as below:

位于底部和顶部的Div有固定高度。中心的一个必须在PAGE HEIGHT - DIV 1 HEIGHT - DIV 3 HEIGHT或在某些情况下更小的高度。

Divs that are at the bottom and at the top have fixed heights. The one in the center have to be exacly in the height of PAGE HEIGHT - DIV 1 HEIGHT - DIV 3 HEIGHT or in some cases smaller.

此外，它必须有因为我预测有时它的内容会比它大，然后它将需要一个滚动条里面。

Also it have to had this size setted because I predict that sometimes it's content will be bigger than it and then it will need a scrollbar inside.

我会接受case当DIV2会更小，但从来没有太大，不适合页面大小与DIV1和DIV3。

I will accept case when DIV2 will be smaller, but never too big to fit to page size with DIV1 and DIV3.

任何解决方案都会很好，不仅使用CSS，但如果你有一个想法，你可以抛出一些Javascript ...我会感谢任何解决方案..甚至不完全正确：）

Any solutions will be good, not only using CSS, but if you have an idea you can throw some Javascript too... I will be grateful for any solution.. even not fully correct :)

推荐答案

我相信你想要的东西

<div id="header" style="position:absolute; top:0px; left:0px; height:200px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; overflow:hidden;"> 
</div> 

这篇关于如何用CSS构建这个布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！