div自适应高度自动填充剩余高度
发布时间：2020-07-08 16:30:03 作者：庞国明 
我要评论
我要评论这篇文章主要介绍了div自适应高度自动填充剩余高度,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
方案1：
Html：
<div class="outer">
<div class="A"> 头部DIV </div>
<div class="B">下部DIV </div>
</div>
CSS：
html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
.A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
.B { height: 100%; background: #D9C666; }
效果：
方案2：
HTML：
<div class="outer">
<div class="A">头部DIV</div>
<div class="B">下部DIV</div>
</div>
CSS：
html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
.B { height: 100%; background: #D9C666; }
效果：
到此这篇关于div自适应高度自动填充剩余高度的文章就介绍到这了,更多相关div自适应高度 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- div的高度是0，不能随图片的高度变化，那么div如何才能够自适应高度呢？下面有个不错的方法，大家可以尝试下2014-05-18
- 拥有最小高度且能自适应高度同时全兼容IE、FF的div该如何设置呢？针对这个问题，下面的示例或许可以帮助到大家，喜欢的朋友可以尝试操作下2013-11-19
- 每当进行页面布局时，我们都有这样的需求，就是当子元素div高度不确定时父div自适应高度，本文整理的多种方法可以解决此问题，感兴趣的朋友可以参考下2013-10-15
- 本文为大家详细介绍下如何实现，相邻div、一个跟着另一个自适应高度，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-04
- 怎样让一个div高度自适应浏览器高度在应用中很常见，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-04-21
CSS min-height IE6、IE7、FF下DIV自适应高度
IE6、IE7、FF下DIV自适应高度2010-05-13
最新评论