Css布局系列-上下两栏布局

本文介绍了一种常用的信息系统布局方式——上下两栏布局。通过设置顶部栏固定高度及底部栏绝对定位并自适应高度的方法,实现了内容溢出时显示滚动条的功能。此布局适用于多数信息系统界面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上下两栏布局,这个在做信息系统的时候我感觉用得比较多。结合前面布局的介绍,改天给介绍一个稍微比较复杂的真实信息系统布局。请看效果图:

要点:最顶一栏给其固定高度,下面一栏高宽度让其自撑,如果该栏的内容溢出,设置overflow属性为auto,允许其出现滚动条。下面一栏必须给设置绝对定位,他top的距离就是等于顶栏的高度且bottom等于0,就会自动拉升高度。

*{margin: 0;padding: 0;}
html, body{height: 100%;}
        
.container{height: 100%;}
.top{width: 100%;height: 60px;background-color: #241fed;}
.middle{width: 100%;top: 60px;background-color: #e30;position: absolute;bottom: 0;overflow: auto;}
  <div class="container">
        <div class="top">
        </div>
        <div class="middle">
            上下布局,下面高度自撑。
        </div>
    </div>

  

转载于:https://www.cnblogs.com/CREN/p/4282495.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值