Div自适应高度的方法
http://www.yutheme.cn/website/index.php/content/view/39/63.html
div高度自适应是个比较麻烦的问题,在朋友artery那里看到这个文章,帮我解决了不少问题,摘录下来: Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main">
<div id="content"></div> </div> 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。 我们可以通过三种方法来解决这个问题。
1增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。
<div id="main">
<div id="content"></div> <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> </div>
2增加一个容器,在代码中存在,但在视觉中不可见。
<div id="main">
<div id="content"></div> <div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div> </div>
3增加一个BR并设置样式为clear:both。
<div id="main">
<div id="content"></div> <br style="clear:both;" /> </div> 补充:
<div id="main">
<div id="content"> <p>demo1</p> <p>demo2</p> <p>demo3</p> </div> </div>
#main { border:1px solid #999999; background-color:#CCCCCC; height:100%; overflow:hidden;}
#content { float:left;} 以上三个方法都不是最好的解决方法,因为在程序代码观念中是提倡尽量不要添加无意义的标签代码 介绍我的解决方法是直接在最外层div加以下样式
#main {
height:100%; overflow:hidden; } |
Div自适应高度的方法的更多相关文章
- DIV+CSS左右两列自适应高度的方法
我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...
- div自适应高度
div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...
- 子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...
- Iframe 自适应高度的方法!
第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...
- div 自适应高度
自适应高度 ,设置最小高度:通常情况下,没有设置高度,div默认自适应高度且无最低高度 1 div{ _height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ...
- 设置div自适应高度滚动
<body> <div id="divc" style="overflow: auto;"> </div> <a id ...
- CSS布局自适应高度解决方法
这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充.加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏 ...
- div套div 里面div有浮动 外面div自适应高度
<div style="background-color:red;"> <div style="float:left;background-color: ...
- div 自适应高度 自动填充剩余高度
方案1: Html: <div class="outer"> <div class="A"> 头部DIV </div> &l ...
随机推荐
- SU supef命令学习
- 水题 ZOJ 3876 May Day Holiday
题目传送门 /* 水题:已知1928年1月1日是星期日,若是闰年加1,总天数对7取余判断就好了: */ #include <cstdio> #include <iostream> ...
- BZOJ3165 : [Heoi2013]Segment
建立线段树,每个节点维护该区间内的最优线段. 插入线段时,在线段树上分裂成$O(\log n)$棵子树,若与当前点的最优线段不相交,那么取较优的,否则暴力递归子树. 查询时在叶子到根路径上所有点的最优 ...
- BZOJ3249 : [ioi2013]game
线段树套Treap 外层的线段树需要动态开节点 内层Treap需要注意的是,相同y坐标的点不一定是同一个点,所以需要再次离散 空间$O(n\log n)$ 时间$O(n\log^2n)$ #inclu ...
- wp7 HubTile
在最新的Windows Phone Toolkit中我们可以看到HubTile这个控件,首先先了解下什么是HubTile,简单来说,就是允许你给你的应用程序添加些生动或富有意义的瓦片(Tile).Hu ...
- 【wikioi】1049 棋盘染色(迭代深搜)
http://www.wikioi.com/problem/1049/ 这题我之前写没想到迭代加深,看了题解,然后学习了这种搜索(之前我写的某题也用过,,但是不懂专业名词 囧.) 迭代加深搜索就是限制 ...
- freemarker 直接使用List来遍历set集合,可能会报错
转摘:http://www.javaweb1024.com/java/JavaWebzhongji/2015/04/08/528.html freemarker 直接使用List来遍历set集合,可 ...
- ueditor使用总结——前端篇.md
首先吐槽下,百度的API太坑,谁让人家都是大牛呢. 说明:本文所涉猎代码均依托于seajs,本文所用ueditor版本为1.4.3.3 JSP UTF-8版 编辑器前端部署: 1.把ueditor引入 ...
- Graph database_neo4j 底层存储结构分析(4)
3.3.2 DynamicStore 类型 3.3.2.1 AbstractDynamicStore 的存储格式 neo4j 中对于字符串等变长值的保存策略是用一组定长的 block ...
- [简单]poi word2007表格按模版样式填充行数据
主要实现了按照模版行的样式填充数据,针对的是动态数据,静态数据可以直接替换变量实现,先说下缺点:1)暂未实现特殊样式填充(如列合并(跨行合并)),只能用于普通样式(如段落间距 缩进 字体 对齐)2)数 ...