再谈DIV的高度自适应
来源:互联网 发布:瑞士方阵知乎 编辑:程序博客网 时间:2024/05/17 03:58
关于div
高度的自适应,一直是个让人头疼的问题,整理了一下以前总结的方法,仅表示我也玩过。
html code:
1 <div id="container"> 2 <div id="leftSide">这边的高度自适应右侧的高度</div> 3 <div id="rightSide"> 4 <script type="text/javascript"> 5 for(i=0;i<10;i++){ 6 document.write(i + '<br>'); 7 } 8 </script> 9 </div>10 </div>
可用的方法大概有以下四种:
1,用absolute
设置一个足够高的高度,在父级元素中清除溢出的部分,具体的css code
如下:
1 #container{ font-size:14px; width:300px; overflow:hidden; border:3px solid blue; margin:10px auto 0; color:#fff; position:relative;}2 #leftSide{ width:100px; float:left; height:200000px; left:0; top:0; position:absolute; background:gray;}3 #rightSide{ width:190px; float:right; text-align:center; background:purple;}
其实这种方法并没有真正的实现左右两个div
等高,只是用了障眼法,利用container
的overflow:hidden
清除了左侧多余的部分,以达到视觉上左右等高的目的,虽然有“白猫黑猫,逮着老鼠就是好猫”的说法,但是笔者并不着重推荐这种方法,因为给父级元素添加relative
,会带来很多不必要的麻烦,况且只能是设置absolute
的一侧自适应另一侧的高度,并不能让两侧中任一侧去自由去适应另一侧!
2,负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相结合
1 #container{ font-size:14px; width:300px; overflow:hidden; border:3px solid blue; margin:10px auto 0; color:#fff;}2 #leftSide{ width:100px; float:left; background:gray; padding-bottom:9999px; margin-bottom:-9999px;}3 #rightSide{ width:190px; float:right; text-align:center; background:purple; padding-bottom:9999px; margin-bottom:-9999px;}
3,利用javascript
脚本实现动态设置高度
1 <script type="text/javascript">2 var left = document.getElementById('leftSide');3 var right = document.getElementById('rightSide');4 if(left.offsetHeight>=right.offsetHeight){5 right.style.height = left.offsetHeight + 'px'; 6 }else{7 left.style.height = right.offsetHeight + 'px';8 }9 </script>
事实上,这种办法真正意义上实现了两侧等高,并且能让两侧中任一侧去自由去适应另一侧,但是其缺点就在于,只有当DOM
加载完成后,才有会这样等高的效果,如果网速够快,这个漏洞可以忽略不计。
4,在父级元素中填充背景,css code
如下:
1 #container{ font-size:14px; width:300px; overflow:hidden; border:3px solid blue; margin:10px auto 0; color:#fff; background:url(http://www.men-ideal.com/images/unit1030.jpg) repeat-y; }2 #leftSide{ width:100px; float:left; }3 #rightSide{ width:190px; float:right; text-align:center}
目前,这种方法是最流行的,同样也是一种“欺骗性”的解决办法,不过除了多使用一张图片之外,都可以堪称完美,这也是笔者极力推荐的!
- 再谈DIV的高度自适应
- Firefox的div高度自适应
- Firefox的div高度自适应
- Firefox的div高度自适应
- Firefox的div高度自适应
- DIV 高度自适应的方法
- div的高度自适应屏幕的高度
- js 获取自适应高度div的高度
- HTML-父类div高度自适应子类div的高度
- div或表格高度自适应的问题
- 解决Div自适应高度的方法
- DIV的自适应高度和等高
- DIV的高度自适应及注意问题
- 真正的DIV高度height自适应
- 转:解决Div自适应高度的方法
- 解决Div自适应高度的方法
- 解决Div自适应高度的方法
- 解决Div自适应高度的方法
- 在基类的析构函数中加virtual ,解决内存泄漏
- 参考的datalist分页helper
- Linux运行级别和chkconfig用法
- Pyinotify文件系统监控
- HDU 3756 还是三分
- 再谈DIV的高度自适应
- Spring联姻Quartz实现作业调度
- 分享利用JS实现两个select标签中内容更换的小实例
- Ruby系列文章之4 --- RVM Ruby 版本管理器的删除
- iphone开发“关闭键盘的例子”
- 黑马程序员:java学习笔记-接口和多态
- vnc密码修改
- Linux下查看版本号的命令
- HDU 1534 Schedule Problem