三列浮动的div，如何让他们高度为100%
最近遇到问题，在扣去顶部的100px后，如何让他们撑满剩余高度。
不用javascript自然最好，如果js更方便的话也请一并告之吧
有实例有代码，请看：
HTML
<div class="header">header</div>
<div class="col1">col1</div>
<div class="col2">col2</div>
<div class="col3">col3</div>
CSS
全选复制放进笔记.header {
width: 100%;
background: #567;
height: 100px;
}
.col1, .col2, .col3 {
float: left;
width: 80px;
background: #DDD;
height: 100%;
margin-right: 10px;
}
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
1
条回答
写回答
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>test</title> <style type="text/css"> .header { width: 100%; background: #567; height: 100px; } .col1, .col2, .col3 { float: left; width: 80px; background: #DDD; height: 100%; margin-right: 10px; word-wrap:break-word; overflow:hidden; padding-bottom:100%; margin-bottom:-98%; font-size:12px; } .foot{height:100px; background-color:#ccc;} .middle{overflow:hidden; zoom:1;} </style> </head> <body> <div class="header">header</div> <div class="middle"> <div class="col1">111colsdfffffffffffffffffffffffffffffcolsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1fffffff1222</div> <div class="col2">col2</div> <div class="col3">333colsdfffffffffffffffffffffffffffffcolsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1fffffff1colsdfffffffffffffffffffffffffffffcolsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1fffffff1444</div> </div> <div class="foot">foot</div> </body> </html>2019-07-17 19:13:00赞同 展开评论
问答分类：
相关问答
问答排行榜
最热
最新
还有其他疑问?
咨询AI助理