两个DIV高度自适应方法(左右两个DIV高度一样)

html:<div id="container"><div id="leftSide"><p>aaaa</p><p>aaaa</p></div> <div id="rightSide"></div>
</div>
1、负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相结合
#container{width:500px; margin:10px auto; overflow:hidden; font-size:14px;
}
#leftSide,#rightSide{padding-bottom:9999px; margin-bottom:-9995px; color:#fff;
}
#leftSide{width:195px; float:left; background:blue; line-height:20px; padding-left:5px;
}
#rightSide{width:300px; float:left; background:green; line-height:20px;
}
2、利用javascript脚本实现动态设置高度
var left = document.getElementById('leftSide');
var right = document.getElementById('rightSide');
if(left.offsetHeight>=right.offsetHeight){  right.style.height=left.offsetHeight+'px';
}else{  left.style.height=right.offsetHeight+'px';
}

转载于:https://www.cnblogs.com/lcx90/p/4873602.html

两个DIV高度自适应方法(左右两个DIV高度一样)相关推荐

html三个div相同高度,两个DIV高度自适应方法(左右两个DIV高度一样)
html: aaaa aaaa bbb 1.使用display:table; 利用的table本身的自适应特性,兼容性好,容易使用#container{width:500px; display: ta ...
DIV高度自适应方法汇总-----摘自网友
你对DIV高度自适应的方法是否了解,这里和大家分享一下,网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度相同,有以下几种方法. DIV高度自适应方法汇总网站优化(seo)中, ...
html宽度自适应怎么调整li超出隐藏,HTML篇之CSS样式——div ul li 嵌套后解决高度自适应方法...
方法一: div 自适应宽度很简单 ,你应该设置div的display:inline-block 然后不要设置宽度就行了方法二: div ul li 嵌套后解决高度自适应办法: html代码如下 ...
iOS-基础控件--UITbleViewCell的自定义(高度自适应方法简单封装)
青楼梦好,难赋深情<巨钳蟹> UITableVie 中系统的Cell共提供了四种默认样式, 分别是: UITableVieCellStyleDefault UITableVieCellSt ...
两化融合贯标方法，两化融合体系贯标分为哪几个过程
"两化融合"是国家工业行业信息化发展的新战略,于2014年提出.早在2010年国家为此成立工信部,目的是以贯标为两化融合的突破口,推动国内企业整体管理体系的发展. 在2016年底, ...
微信小程序swiper高度自适应方法
小程序swiper高度自适应 data: {//图片hdimg: [],//是否采用衔接滑动circular: true,//是否显示画板指示点indicatorDots: false,//选中点的颜 ...
jqGrid 如何实现高度自适应跟随窗口尺寸变动自动调整高度
jqGrid可以在构建的时候通过height参数来设置表格初始高度,也可以在后续通过调用setGridHeight函数来动态设置表格高度.本文利用jqGrid的setGridHeight函数和wi ...
微信小程序swiper高度自适应，swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
swiper高度自适应_微信小程序swiper高度自适应
微信小程序swiper高度自适应的实现方式,首先swiper默认最小高度150,下面请看开发实例. 要求:swiper高度自适应 wxml wxss .swiper image { width: 10 ...
swiper高度自适应_小程序 swiper 图片高度自适应+预览图片
一.概述: 在开发小程序的项目中,经常会用到swiper这个轮播组件,但是使用的时候会有一个问题,swiper系统会默认一个高度而且是px为单位的,如下: swiper { display:block ...

两个DIV高度自适应方法(左右两个DIV高度一样)

两个DIV高度自适应方法(左右两个DIV高度一样)相关推荐

最新文章

热门文章