限时免费试用:欢迎注册 api.bigmodel.org ,快速体验大模型 API 接入服务。

网站技术

div 自适应高度 自动填充剩余高度

方案1: Html: 1 2 3 4 头部DIV 下部DIV CSS: 1 2 3 4 5 html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: rela

作者
王明昌
发布时间
最后更新

方案1:

Html:
1
2
3
4
<divclass="outer">
<divclass="A"> 头部DIV div>
<divclass="B">下部DIV div>
div>
CSS:
1
2
3
4
5
html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px00; box-sizing: border-box ; position: relative; }//三padding: 100px0 100px0;
.A { height: 100px; background: #BBE8F2; position: absolute; top: 0; left: 0; width: 100%; }
.B { height: 100%; background: #D9C666; }

方案2:

HTML:
1
2
3
4
<divclass="outer">
<divclass="A">头部DIVdiv>
<divclass="B">下部DIVdiv>
div>
CSS:
1
2
3
4
5
html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px00; box-sizing: border-box ; }
.A { height: 100px; margin: -100px00; background: #BBE8F2; }
.B { height: 100%; background: #D9C666; }
效果: div 自适应高度 自动填充剩余高度
0/500
友善分享您的看法。
反馈邮箱