代码之家 › 专栏 › 技术社区 › Åukasz W.

如何用CSS构建这个布局?

layout xhtml css html javascript

Åukasz W. · 技术社区 · 15 年前

位于底部和顶部的潜水舱具有固定的高度。在中间的那一个必须在页高-DIV 1高度-DIV 3高度或者在某些情况下更小的高度。

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

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

任何解决方案都是好的,不仅是使用CSS,而且如果你有想法你也可以抛出一些Javascript。。。如果有任何解决办法,我将不胜感激。。甚至不完全正确:)

4 回复 | 直到 6 年前

John Hartsock 15 年前

我相信你想要这样的东西

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

Catfish 15 年前

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

Matt Ball 15 年前

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

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

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

是我用过的另一种选择。

Jonnio 15 年前

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前