html div最小高度,DIV CSS网页布局 最小高度（min-height）的妙用

DIV CSS网页布局 最小高度(min-height)的妙用

更新时间：2008年11月13日 10:15:00   作者：

最小高度可以设定一个BOX的最小高度，当其内容较少时时，也能保持BOX的高度为一定，超出就自动向下延伸，但到目前为止，只有Opera 和 Mozilla 支持，IE7开始也支持了，但IE7处于测试阶段，等正式版发布到普及需一段也许比较长的时间，除非MS把它捆绑在某个操作系统上，如何在现有基础上(IE6 80-90%)，合理、妙用最小高度了？

假定有二个BOX，我们需要它的最小高度为150PX。

CSS

div.box1,div.box2{

width: 300px;

min-height: 150px;

background: #EEE;

float: left;

margin-right: 20px;

}

xhtml

IE中没保持最小高度为150px

最小高度可以设定一个BOX的最小高度， 当其内容较少时时，也能保持BOX的高度为一定

现在的效果，IE中没保持最小高度为150px。

解决的方法

为IE设定一个高度

* html div.box1,* html div.box2{height: 150px;}

wellstyled.com 的解决方法是采用 CSS 的属性选择符(Attribute Selectors)

div.box1,div.box2{ ......height: 150px;}

/* IE靠这保持最小高度，超出就自动向下延伸 */

div[class].box1,div[class].box2{height: auto;}

/* 具有类选择符(class)属性的DIV对象 */

IE自然又是不支持的啦，Opera 和 Mozilla 支持，读取这个高度。可应用场合：搜索、文章等页面(没采用100%高度，当搜到的内容较少时，不至于页面太短。

相关文章

今天把一些常用的CSS Hack整理了一下，包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack，并把这些CSS Hack综合的一起，写了一个小的浏览器测试器2014-05-05

css中的行间距的代码...2007-08-08

对hao123进行重构...2006-12-12

CSS样式表规划与管理的经验总结...2007-09-09

其实和跟border的属性一样的东西，做网页的朋友熟练利用下面的样式，就可以做出漂亮的边框效果2008-09-09

不用float实现div模块居中布局...2007-02-02

CSS实现的一个图片放大展示的一种思路...2007-10-10

本文主要介绍使用cookie解决微信不能存储localStorage的问题,

这里提供了代码示例,有需要的小伙伴可以参考下2016-07-07

[转]目前找到的最好的Iframe自适应高度代码...2007-02-02

在XHTML标签中有一些标签的作用是相似的，当然这里的相似是指语义相似，以至于很多人都不清楚这些相似的标签如何使用，那么今天的主题就是分解相似的标签，明确各个标签的用途。2008-06-06

最新评论