Question

我不是CSS的新手，但这对我来说是个问题，我无法解决。我需要构建如下布局：

Layout http://img121.imageshack.us/img121/2153/layoutsample.jpg

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

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

我会接受DIV2较小的情况，但永远不会太大，无法使用DIV1和DIV3适合页面大小。

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

Answer 1

我相信你想要这样的东西

<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>

Answer 2

这将帮助您垂直和水平居中div

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

Answer 3

使用jQuery在窗口调整大小时设置DIV2的高度：

var $div1 = $('#DIV1'),
    $div2 = $('#DIV2'),
    $div3 = $('#DIV3'),
    $window = $(window);

$window.resize(function ()
{
    $div2.height($window.height() - ($div1.height() + $div3.height()));
});

是我用过的另一种选择。

Answer 4

我不确定我是否理解你的要求。但是这个呢。

<html>
<head>
<style>
body {
    margin : 0
}

#top {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    border: solid 1px black
}
#middle
{
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    width: 100%;
    overflow: auto;
    border: solid 1px green;
}

#bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100px;
    width: 100%;
    border: solid 1px blue;
}

</style>

</head>
<body>
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</body>
</html>

如何使用CSS构建此布局？

4 个答案: