- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- DIV自适应补充高度的效果怎样实现，有什么方法？
DIV自适应补充高度的效果怎样实现，有什么方法？
Admin 2021-12-10 群英技术资讯 1546 次浏览
这篇文章给大家分享的是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自适应高度自动补充剩余高度的实现介绍，有需要的朋友可以参考了解看看，希望对大家学习或工作有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。
文本转载自脚本之家
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
CSS中怎么让背景有模糊的效果，方法是什么
这篇文章主要介绍了CSS设置背景模糊的实现方法,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
-
在CSS3中怎么给文字添加扫光的动态效果
这篇文章主要介绍了css3实现文字扫光渐变动画效果的示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
-
CSS中counter()函数的使用有什么要求，用来做什么的
counter()函数必须和content属性一起使用，用来显示CSS计数器。它以CSS计数器名称作为参数，并作为值传递给content属性，而content属性就会使用:before伪元素将计数器显示为生成的内容。
-
Sass和Compass是什么，怎么进行安装
Sass和Compass是什么？在讲这个之前呢，先介绍下CSS。相信你跟我一样，经过若干段时间的开发后也比较熟悉CSS。但是有一点我们都很清楚，它是一种样式表，并不是一种编程语言。所以，有些童鞋经常说自己最近在学习CSS编程是错误滴。CSS里包含了很多选择器及应用的样式规则，而其中并不包含变量、函数、继承等这些我们在一般 ...
-
CSS实现变形、过渡和动画的效果的基本方法是什么
这篇文章主要介绍了CSS 小结笔记之变形、过渡与动画的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
