在FF下一个自适应高度的简单做法
加上
height: 100%;
overflow: auto;
自动换行的简单做法
table-layout: fixed;
WORD-BREAK: break-all;
WORD-WRAP:
break-word;
下面通过DIV+CSS布局的网页高度不能自适应一个例子,来说明如何解决这个问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-
equiv="Content-Type" c
/>
<title>DIV高度无法自适应</title>
<style
type="text/css">
#all {
width:240px;
padding:10px;
font-size:12px;
color:#FFF;
background-color:#CCC;
}
#sub {
float:left;
width:230px;
line-height:20px;
padding:0 5px;
background-color:#F90;
}
</style>
</head>
<body>
<div id="all">
<div id="sub">
外层DIV高度无法自适应。
</div>
</div>
</body>
</html>
1、问题:运行这段代码可以看到,在IE下一切正常,但在FireFox或IE7下,父对象All没有适应子对象Sub的高。
2、解决方法:
例中,XHTML代码:“<div
id="all"><div id="sub">外层DIV高度无法自适应。
</div></div>”,其CSS为:“#all {width:240px;...} #sub
{float:left;...}”。
由于子对象Sub设置了浮动(float:left),而父对象All没有设置浮动,所以才会出现这样的问题。
(1)将父对象也设置浮动。即把“float:left;”加到“#all
{...}”中。
(2)将子对象的浮动属性去掉。即把“float:left;”从“#sub {...}”中删除。
(3)在“<div
id="sub">外层DIV高度无法自适应。</div>”的后面加一个空的块级对象,并设置
“clear:both;”取消浮动。如“<div style="clear:both"></div>”
。但此方法在IE中仅限于有两个或两个以上的浮动子对象时才生效,只有一个浮动子对象,用此方法底下会多出10px的高度。
由方法(2)又想到了一个新问题,如果类似论坛中,一个话题分左右两边的布局,而且左右分别都有固定的宽度时就必须要用到浮动属性。如:
<div
id="all">
<div class="sub"><div
class="left">左边是用户头像</div><div
class="right">右边是话题内容</div></div>
........
</div>
这种情况下方法(2)和方法(3)就不适用了。因为方法(2)是将子对象的浮动属性去掉,而去掉浮动属性就不可能实现;方法(3)仅适用于有多个浮
动对象,但如果恰巧只有1条记录呢?除非下面不在乎那10px。此时我向最适用的就是方法(1)了。
解决方法小结:
1、父元素也浮动 (没有指定宽度的float应当伸缩包装到浮动内容的宽度)
2、clear属性
3、为父层设置
{overflow:auto; _height:1%;} 前者针对火狐IE7(overflow:auto 或hidden) 后者针对IE6(_height:1%
或he\ight:1%)
* html .clear{height:1%}
4、父元素设置高度宽度
5、针对
火狐
#d1:after
{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
其他小技巧:
html也要设置100%
,对后面的div可能会有影响
html,body{
height:100%;
margin:0;
}
设置 div为绝对定位.
style="width:500px; height:100%!important;
background:#003333;
position:absolute;"
./#/需要自动高度的地方
{
min-height:500px;
height:auto;/*IE7*/
_height:500px;/*IE6*/
display:table;/*firefox,opera*/}
分享到:
相关推荐
div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight
div+css,web标准,div+css布局,div+css实例,div+css模板
12天学会DIV+CSS从理论到实践的教程,强烈推介。 第一天:选择什么样的DOCTYPE 第二天:什么是名字空间 第三天:定义语言编码 ...第十天:自适应高度 十一天:不用表格的菜单 十二天:校验及常见的错误
div+css模板布局 右侧固定,左侧自适应
div+css菜单导航布局自适应宽度,纯div+css
div+css布局 三行三列 中间自适应
Div+Css网页版式布局 包括固定宽度和自适应宽度的网页版式布局 对于初学者和有研究者都是不错的资源哦 本人感觉实用性比较强
div+css,web标准,div+css布局,div+css实例,div+css模板
HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
div+css布局中简单的样式,例如: 左右自适应布局 #left { background-color: #FFFF33; height:250px; width:25%; border:10px solid #000000; float:left; margin:10px; }
50例DIV+CSS模板,含最常用的一些网页布局模板。包括固定宽度版式和自适应宽度版式
html5新标签使用header、footer、nav、section布局,css设定及使用方法
div+css网页标准版式布局,20个绝对布局,20个自适应的,网页板式很全,适合新手入门。(最新版本)
CSS+DIV写的,上下固定高度,中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
2、自适应(弹性)宽度CSS版式布局 3、标准布局常见问题及解决办法 像素问题及解决办法 上边容器浮动后,下边的容器跟着浮动,造成页面错乱 当子元素浮动且未知高度时,怎么使父容器适应子元素的高度? 相对定位与...
这是我自己项目总结的一些布局方法,基于DIV+CSS实现的一种弹性盒模型布局,主要利用display:table-cell;这一属性来实现,兼容良好,可扩展性也比较强。适用于做前端重构、架构的童鞋。
NULL 博文链接:https://javapub.iteye.com/blog/709361
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共有多个页面,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度,主体内容区域宽度 1000多套(HTML+CSS+JS)网页设计的...