61,115
社区成员
发帖
与我相关
我的任务
分享拜求上下两个div布局求解！
需求：两个DIV上下布局，下面div高度固定40px作为菜单栏使用，上方DIV作为内容栏自适应，其高度为从浏览器顶端到下面div上沿，无缝对接，如果上方div中的内容竖直方向超过了其div高度，则上方div内容可以滚动。不能把上方div竖直方向撑开，进而把下方div顶下去，也就是让浏览器自始至终不会出现竖直方向的滚动条，小弟在线求解，拜各位大牛赐教
另注
1.刚才别人帮着做了两个例子，都有问题，一个就是上面div的高度要求自动适应，填充满下方div上沿到浏览器窗口的顶部
2.下方div高度固定不能用百分比
3.上方div的内容不能被下方div遮住（这种效果我已经做过了，不符合要求）
另注
1.刚才别人帮着做了两个例子，都有问题，一个就是上面div的高度要求自动适应，填充满下方div上沿到浏览器窗口的顶部
2.下方div高度固定不能用百分比
3.上方div的内容不能被下方div遮住（这种效果我已经做过了，不符合要求）
...全文
请发表友善的回复…
发表回复
forwardNow 2015-06-09
- 打赏
- 举报
至于内容超出的情况，使用 “overflow”属性即可：
.main {
background-color: green;
height: calc( 100% - 40px );
overflow: auto;
}
forwardNow 2015-06-09
- 打赏
- 举报
如果是纯CSS的话，可以使用CSS3的“ calc() ”来实现你的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.box {
height: 100%;
background-color: gray;
}
.bottom {
background-color: blue;
height: 40px;
}
.main {
background-color: green;
height: calc( 100% - 40px );
}
</style>
<div class="box">
<div class="main"></div>
<div class="bottom"></div>
</div>
</body>
</html>
Braska 2015-06-09
- 打赏
- 举报
#Main的height改成95%试试
rieikichi 2015-06-08
- 打赏
- 举报
多谢回答，但是有问题
我自己加了点文本，发现在最顶上没有显示出来，上面的div其实顶端的一部分顶到浏览器界面上边的外部了，如图
rieikichi 2015-06-08
- 打赏
- 举报
对，下面的div要求总在界面内
Braska 2015-06-08
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html,body {
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#Main {
position:absolute;
bottom:40px;
width:100%;
height:100%;
overflow:auto;
}
#ToolBar {
position:absolute;
bottom:0px;
width:100%;
height:40px;
text-align:center;
BACKGROUND:#aaa;
overflow:hidden;
}
</style>
</head>
<body>
<div id="Main">
<p>div1</p><p>div1</p><p>div1</p><p>div1</p><p>div1</p>
<p>div1</p><p>div1</p><p>div1</p><p>div1</p><p>div1</p>
<p>div1</p><p>div1</p><p>div1</p><p>div1</p><p>div1</p>
<p>div1</p><p>div1</p><p>div1</p><p>div1</p><p>div1</p>
<p>div1</p><p>div1</p><p>div1</p><p>div1</p><p>div1</p>
<p>div1</p><p>div1</p><p>div1</p><p>div1</p><p>div1</p>
<p>div1</p><p>div1</p><p>div1</p><p>div1</p><p>div1</p>
<p>div1</p><p>div1</p><p>div1</p><p>div1</p><p>div1</p>
<p>div1</p><p>div1</p><p>div1</p><p>div1</p><p>div1</p>
<p>div1</p><p>div1</p><p>div1</p><p>div1</p><p>div1</p>
</div>
<div id="ToolBar">div2</div>
</body>
</html>
mimiooo1003 2015-06-08
- 打赏
- 举报
额，貌似想简单了 楼主是需要下方div一直显示在界面里面么？
mimiooo1003 2015-06-08
- 打赏
- 举报
.top{
width:100%;
min-height:1000px;
float:left;
}
.bottom{
width:100%;
height:40px;
float:left;
}
rieikichi 2015-06-08
- 打赏
- 举报
