猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

最近遇到问题，在扣去顶部的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;
}

如果有footer的情况下 

假如footer也要占位100px，一直位于下方，那中间这三列又该怎么弄呢？


慕码人8056858
浏览 214回答 2
2回答

动漫人物

padding-bottom大数值margin-bottom负大数值.col1, .col2, .col3 {&nbsp; &nbsp; float: left;&nbsp; &nbsp; width: 80px;&nbsp; &nbsp; background: #DDD;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; margin-right: 10px;&nbsp; &nbsp; padding-bottom:5000px;&nbsp; &nbsp; margin-bottom:-5000px;}
0

杨__羊羊

试试这个， 不知满足楼主要求否？<!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN"&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html&nbsp;xmlns="http://www.w3.org/1999/xhtml"><head> &nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;http-equiv="Content-Type"&nbsp;content="text/html;charset=UTF-8"/> &nbsp;&nbsp;&nbsp;&nbsp;<title>test</title> &nbsp;&nbsp;&nbsp;&nbsp;<style&nbsp;type="text/css"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.header&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#567;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.col1,&nbsp;.col2,&nbsp;.col3&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;80px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#DDD;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-right:&nbsp;10px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;word-wrap:break-word;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow:hidden;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-bottom:100%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:-98%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:12px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.foot{height:100px;&nbsp;background-color:#ccc;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.middle{overflow:hidden;&nbsp;zoom:1;}&nbsp;&nbsp;&nbsp;&nbsp;</style></head><body><div&nbsp;class="header">header</div><div&nbsp;class="middle"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col1">111colsdfffffffffffffffffffffffffffffcolsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1fffffff1222</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col2">col2</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="col3">333colsdfffffffffffffffffffffffffffffcolsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1fffffff1colsdfffffffffffffffffffffffffffffcolsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1colsdffffffffffffffffffffffffffffffffffff1fffffff1444</div></div><div&nbsp;class="foot">foot</div></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答