加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 黄冈站长网 (http://www.0713zz.com/)- 数据应用、建站、人体识别、智能机器人、语音技术!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

DIV自适应补充高度的效果实现方法

发布时间:2023-12-27 22:48:49 所属栏目:语言 来源:DaWei
导读: 这篇文章给大家分享的是DIV自适应高度指自动补充剩余高度的实现。小编觉得挺实用的,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧。

方案
这篇文章给大家分享的是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自适应高度自动补充剩余高度的实现介绍,有需要的朋友可以参考了解看看,希望对大家学习或工作有帮助。

(编辑:PHP编程网 - 黄冈站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章