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 ...
随机推荐
- 模拟 POJ 1573 Robot Motion
题目地址:http://poj.org/problem?id=1573 /* 题意:给定地图和起始位置,robot(上下左右)一步一步去走,问走出地图的步数 如果是死循环,输出走进死循环之前的步数和死 ...
- POJ1511 Invitation Cards(多源单汇最短路)
边取反,从汇点跑单源最短路即可. #include<cstdio> #include<cstring> #include<queue> #include<al ...
- TYVJ P1037 阶乘统计2 Label:坑
描述 n的阶乘定义为n!=1*2*3*……*n 如3!=6 n!通常最后会有很多0,如5!=120 最后有一个0,现在统计n!去除末尾的0后,最后k位是多少 输入格式 第一行包括两个数n,k 输 ...
- 【BZOJ】1043: [HAOI2008]下落的圆盘(计算几何基础+贪心)
http://www.lydsy.com/JudgeOnline/problem.php?id=1043 唯一让我不会的就是怎么求圆的周长并QAAQ... 然后发现好神!我们可以将圆弧变成$[0, 2 ...
- Noi 2016
考砸只能说自己弱 Noi不是生活的全部, 人们也不会永远止步于失败. 大家加油 可以+我的qq:582744883
- Get the image file(s) some informations,Including the Make,Model,Date/Time,etc
This is a blog about how to get the image file(s) some informations.Including the Make,Model,Date/Ti ...
- MySql Replication配置
一.前言 Mysql Replication作为读写分离的廉价解决方案,支持一主多备的方式进行数据存储,采用二进制日志传送,目前存在着广泛应用,网上相关概念也比较多,不再重复介绍.引用一张官方提供的R ...
- linux 快捷键
截图: 打印: 全屏截图 alt+打印:窗口截图 shift+打印:区域截图 ctrl+打印:截图到剪贴板 显示桌面: ctrl+super+d 最大化最小化窗口 ctrl+alt+up/down 转 ...
- Genymotion填坑之路
Genymotion是一款android的模拟器,之前用的一台电脑直接装上就可以用,后来换了一台机器,一直报获取不到IP,后来网上各种找方法,偶然发现网上说的是硬件问题: 在BIOS中将CPU的vir ...
- [转帖] CvMat,Mat和IplImage之间的转化和拷贝
原文地址: http://blog.csdn.net/holybin/article/details/17711013 在OpenCV中Mat.CvMat和IplImage类型都可以代表和显示图像. ...