- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- DIV自适应补充高度的效果怎样实现，有什么方法？
DIV自适应补充高度的效果怎样实现，有什么方法？
Admin 2021-12-10 群英技术资讯 540 次浏览
这篇文章给大家分享的是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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
基于HTML5如何写直播时评论滚动的效果
这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
-
CSS图片放大溢出后部分如何隐藏，方法是什么
方法：1、给图片元素添加“transform:scale(横向缩放值,竖向缩放值)”样式将图片放大；2、利用overflow属性将图片元素放大后溢出的部分隐藏起来，语法为“图片元素的父元素{overflow:hidden;}”。
-
Flex布局默认高度是怎样的，如何保持自身高度
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。这是因为Flex 布局会默认：把所有子项变成水平排列。默认不自动换行。让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。这样设置背景色的时候非常不...
-
CSS中实现水平居中宽度的影响是什么
固定宽度这种方式是绝对定位居中，除了使用margin，还可以使用transform。宽度未知将子元素设置为行内元素，然后父元素设置text-align: center。
-
用CSS写一个自适应正方形的代码是什么
css怎样实现自适应正方形由于height是不固定的，所以不能直接使用height值。因此转换思路使用width值来实现正方形的height赋值。所以理论上只要能够将宽度属性应用在高度属性
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
