
CSS布局中最小高度(min-height)的妙用
发布时间:2006-05-22 12:47:01 来源:fifty studio 网友评论 0 条最小高度可以设定一个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
| 以下是引用片段: <div>IE中没保持最小高度为150px</div> <div>最小高度可以设定一个BOX的最小高度, 当其内容较少时时,也能保持BOX的高度为一定</div> |
现在的效果,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%高度,当搜到的内容较少时,不至于页面太短。
推荐阅讯
- 如何像表格table一样对层div进行轻松布局
- CSS滤镜属性详解
- 手写样式表:CSS语法全攻略(上)
- 样式表概述:CSS实用代码介绍
- DIV+CSS网页布局入门
- 做好开头成功一般 Head标记意义非凡
- 网页常见可用性错误——表单组件错误
- 像表格table一样轻松布局div层
- fieldset实现表中表效果
- 用CSS实现中文字段的几种有趣排列方式
阅读排行
- 1.如何使用CSS来进行网页排版
- 2.CSS样式表教程-If you love css …
- 3.CSS用样式表美化你的网页
- 4.网页制作:几种所见所得的WEB在线编辑器
- 5.网页常见可用性错误——表单组件错误
- 6.CSS+JavaScript打造超酷右键菜单
- 7.针对浏览器隐藏CSS之九大技巧
- 8.DIV+CSS网页布局入门
- 9.搜索引擎的蜘蛛人(ROBOTS)秘密
- 10.CSS垂直树形下拉菜单
专题教程
- 大话G游 专题:手机病毒揭密
- ARP攻击防范与解决方案 路由故障处理手册
- Picasa中文版_Picasa教程 专题:清除流氓软件
- Firefox专题 seo搜索引擎优化专区
- 重装Windows必知的事情 装机之必备软件大行动
病毒专杀栏
