如何用CSS构建这个布局？

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

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

Div的是在底部和顶部有固定的高度。中间的一个必须在页高的高度 - 或者在某些情况下要小一些。

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

我会接受的情况下，DIV2会更小，但不会太大，以适应与DIV1和DIV3页面大小。

的任何解决方案，将是不错的，不仅是使用CSS，但如果你有一个想法，你可以扔掉一些JavaScript太...我将是任何解决方案感激。即使不完全正确:)

来源

2010-07-27 ŁukaszW.pl

我相信你想要的东西，这样的

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

来源

2010-07-27 14:49:19

伟大的解决方案，谢谢约翰哈特洛克先生... – 2010-07-27 14:55:38

没问题。我总是使用这种布局。它的灵活性和易用性。没有JavaScript，只是纯粹的HTML和CSS。你也可以使用相同的技术将内容分割成两个创建左侧导航菜单 – 2010-07-27 14:58:28

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

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

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

是我用过的另一种选择。

来源

2010-07-27 14:53:11

Aaaa ..一些js解决方案，很好..感谢您的帮助... – 2010-07-27 14:58:15

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

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

来源

2010-07-27 14:53:11 Catfish

非常好的链接，谢谢..将是有益的... – 2010-07-27 14:57:20

我不知道如果我明白究竟你问什么。但是这个怎么样。

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

来源

2010-07-27 15:02:39 Jonnio

如何用CSS构建这个布局？

回答

相关问题