61,112
社区成员
发帖
与我相关
我的任务
分享DIV高度等于浏览器高度，内容超过后出滚动条
让一个DIV的高度自动等于页面高度，不随里面内容多少改变，当里面的内容超出后，这个DIV出现滚动条，不改变DIV自身的高度，
已经设置了
上面一横排DIV，高度不确定
下面一个DIV，里面水平盒子左中右三个DIV，要设置左和右两个DIV高度等于浏览器剩下的高度，并且不能超出，里面的内容超过高度时自动出现滚动条overflow-y: auto; 要怎么设置呢
不知道怎么说了，反正就是没实现，谁有好的方法么
已经设置了
html,
body {
height: 100%;
margin: 0;
padding: 0;
}上面一横排DIV，高度不确定
下面一个DIV，里面水平盒子左中右三个DIV，要设置左和右两个DIV高度等于浏览器剩下的高度，并且不能超出，里面的内容超过高度时自动出现滚动条overflow-y: auto; 要怎么设置呢
不知道怎么说了，反正就是没实现，谁有好的方法么
...全文
请发表友善的回复…
发表回复
zhangyulinz 2017-03-17
- 打赏
- 举报
非常感谢楼上各位
iChos10 2016-07-09
- 打赏
- 举报
上面那个IE不太兼容，这个兼容三个浏览器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>iChos - 后台管理</title>
<style type="text/css">
.main {
background: #888;
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
display: table;
height: 100%;
width: 100%;
}
.row {
display: table-row;
}
.top, .bottom {
display: table-cell;
}
.top {
background: red;
}
.bottom {
background: blue;
height: 100%;
}
.left, .right, .center {
float: left;
}
.left {
height: 100%;
background: #eee;
width: 200px;
}
.center {
background: #eee;
width: 400px;
margin-left: 10px;
}
.right {
height: 100%;
background: #ccc;
width: 300px;
margin-left: 10px;
}
</style>
</head>
<body style="overflow:hidden">
<div class="main">
<div class="row">
<div class=top>我是上<br>我是上我是上<br>我是上我是上<br>我是上我是上<br>我是上我是上<br>我是上我是上<br>我是上我是上<br>我是上我是上<br>我是上我是上<br>我是上我是上<br>我是上我是上<br>我是上我是上<br>我是上我是上<br>我是上我是上<br>我是上</div>
</div>
<div class="row">
<div class="bottom">
<div class="left">我是左边</div>
<div class="center">我是中间</div>
<div class="right">我是右边</div>
</div>
</div>
</div>
</body>
</html>
iChos10 2016-07-09
- 打赏
- 举报
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>iChos - 后台管理</title>
<style type="text/css">
.main {background:#888;position:absolute;
left:0px;top:0px;bottom:0px;right:0px;
display:table;height:100%;width:100%;
}
.row {display:table-row;
}
.top, .bottom {display:table-cell
}
.top {
background: red;
}
.bottom {background:blue;height:100%;position:relative;
}
.left {position:absolute;top:0px;bottom:0px;left:0px;background:#ddd;width:200px;
}
.center {
position: absolute;
top: 0px;
bottom: 0px;
left:250px;
background: #eee;
width: 400px;
}
.right {
position: absolute;
top: 0px;
bottom: 0px;
right:0px;
background: #ccc;
width: 300px;
}
</style>
</head>
<body style="overflow:hidden">
<div class="main">
<div class="row">
<div class=top>我是上<br>我是上</div>
</div>
<div class="row">
<div class="bottom">
<div class="left">我是左边</div>
<div class="center">我是中间</div>
<div class="right">我是右边</div>
</div>
</div>
</div>
</body>
</html>
ldxsik 2016-07-09
- 打赏
- 举报
html5的写法，已经测试ok
ldxsik 2016-07-08
- 打赏
- 举报
配合js,可以实现吧
张祠 2016-07-08
- 打赏
- 举报
要给那个div设置一个高度
张祠 2016-07-08
- 打赏
- 举报
在需要显示滚动条的div样式中加上overflow-y: auto;
