为了账号安全,请及时绑定邮箱和手机立即绑定

最近遇到问题,在扣去顶部的100px后,如何让他们撑满剩余高度?

最近遇到问题,在扣去顶部的100px后,如何让他们撑满剩余高度?

慕码人8056858 2023-04-13 23:19:12
不用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,一直位于下方,那中间这三列又该怎么弄呢?
查看完整描述

2 回答

?
动漫人物

TA贡献1815条经验 获得超10个赞

padding-bottom大数值margin-bottom负大数值

.col1, .col2, .col3 {

    float: left;

    width: 80px;

    background: #DDD;

    height: 100%;

    margin-right: 10px;

    padding-bottom:5000px;

    margin-bottom:-5000px;

}


查看完整回答
反对 回复 2023-04-17
?
杨__羊羊

TA贡献1943条经验 获得超7个赞

试试这个, 不知满足楼主要求否?

<!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>


查看完整回答
反对 回复 2023-04-17
  • 2 回答
  • 0 关注
  • 213 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信