DIV高度等于浏览器高度,内容超过后出滚动条

zhangyulinz 2016-07-04 09:11:26
让一个DIV的高度自动等于页面高度,不随里面内容多少改变,当里面的内容超出后,这个DIV出现滚动条,不改变DIV自身的高度,
已经设置了
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

上面一横排DIV,高度不确定
下面一个DIV,里面水平盒子左中右三个DIV,要设置左和右两个DIV高度等于浏览器剩下的高度,并且不能超出,里面的内容超过高度时自动出现滚动条overflow-y: auto; 要怎么设置呢
不知道怎么说了,反正就是没实现,谁有好的方法么
...全文
1959 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
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;

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧