如何使用CSS构建此布局？

Question

如何使用CSS构建此布局？

javascripthtmlcssxhtmllayout

5

我不是CSS的新手，但这对我来说是一个问题，我无法解决它。我需要按照以下方式构建布局：

顶部和底部的div具有固定高度。中间的div必须与页面高度-DIV1高度-DIV3高度相同或更小。

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

我将接受DIV2较小的情况，但永远不会太大以适应DIV1和DIV3的页面大小。

任何解决方案都可以，不仅使用CSS，如果您有想法，也可以使用一些Javascript…我将感激任何解决方案..即使不完全正确：）

- Łukasz W.

4个回答

4

这将帮助您垂直和水平居中div。 http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

- Catfish

2

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

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

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

这是我使用过的另一个选项。

- Matt Ball

0

我不确定我是否完全理解你的问题。但是这个怎么样？

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

- Jonnio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John Hartsock · Accepted Answer

我相信您想要的是这样的内容。

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