易截截图软件、单文件、免安装、纯绿色、仅160KB

CSS网站布局div高度自适应 解决

很多的Web
designer在刚接触W3C标准的时候,都遇到过高度自适应的问题。因为div等对象的height:100%;并不能够直接产生实际效果,于是开始
怀疑浏览器是否支持height:100%;的编写方法?当然不是,最明显的例子就是table
height="100"是没有任何问题的。这是很令人烦恼的问题。我浏览了很多网站,包括www.w3cn.org等,有的解决办法是不断地修改
height的固定值,或者利用页面背景和div背景相同来欺骗浏览者的视觉,但都没有从根本上解决问题。今天从一本《CSS网站布局实录》上终于找到最
完美的解决办法,来看一下这段高度自适应的CSS代码:
html,body{
     margin:0px;
     height:100%;
}
#left {
     background-color:#CCC;
     width:300px;
     height:100%;
     float:left;
}
代码已经到了不能再简单的地步,对#left对象设置了height:100%;,然而也能够看见,同时设置了HTML与body的height:100%;,而这个就是高度自适应问题的关键所在。
分析:
一个对象高度是否可以使用百分比显示,取决于对象的父级

象,#left在页面中直接旋转在body之中,因此它的父级是body,而浏览器默认状态下,是没有给body一个高度属性的,因此当我们直接设
置#left为height:100%;时,不会产生任何效果,而当我们给body设置了100%之后,它的子级对象#left的
height:100%;便发生作用了,这便是浏览器解析规则引发的高度自适应问题。而代码中除了给body应用之外,还给HTML对象也应用相同的样式
设计,这样做的好处是使IE与firefox浏览器都能够实现高度自适应,而body却不是。另外,Firefox中的HTML标签不是100%高度,因
此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。


相关文档:

【十天精通div+css布局系列教程】之六:XHTML代码规范

1.所有的标记都必须要有一个相应的结束标记
  以前在HTML中,你可以打开许多标签,例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。例如:
  <br />&l ......

【十天精通div+css布局系列教程】之八:CSS布局入门

1.定义DIV
  分析一个典型的定义div例子:
  #sample{ MARGIN: 10px 10px 10px 10px;
  PADDING:20px 10px 10px 20px;
  BORDER-TOP: #CCC 2px solid;
  BORDER-RIGHT: #CCC 2px solid;
  BORDER-BOTTOM: #CCC 2px solid;
  BORDER-LEFT: #CCC 2px solid;
  BACKGROUND: url(images/bg_poem.jpg) # ......

CSS常见兼容性问题


DOCTYPE 影响 CSS 处理
Firefox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
Firefox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
Firefox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 heig ......

CSS完美兼容IE6/IE7/FF的通用方法

一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
*+ht ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号