您现在的位置是：网站首页> 编程资料编程资料

div自适应高度自动填充剩余高度div不能自适应高度不能随图片的高度变化拥有最小高度能自适应高度同时全兼容IE、FF的div设置子元素div高度不确定时父div高度如何自适应相邻div实现一个跟着另一个自适应高度示例代码怎样让一个div高度自适应浏览器高度CSS min-height IE6、IE7、FF下DIV自适应高度

2021-09-03 713人已围观

简介这篇文章主要介绍了div自适应高度自动填充剩余高度,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

方案1：

Html：

 头部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
下部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自适应高度内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：CSS让子容器超出父元素(子容器悬浮在父容器效果)css使用flexbox布局容器内多元素水平居中Css浮动元素外层容器高度为0(无高度)的解决方法CSS常见的让元素水平居中显示的方法清除网页浮动CSS的做法CSS教程：彻底弄懂闭合浮动元素

下一篇：纯CSS实现左右拖拽改变布局大小纯 CSS 实现拖拽效果的代码

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢