当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-10-04

    本文导语:  假定有二个BOX,我们需要它的最小高度为150PX。 CSS div.box1,div.box2{ width: 300px; min-height: 150px; background: #EEE; float: left; margin-right: 20px; } xhtml IE中没保持最小高度为150px 最小高度可以设定一个BOX的最小高度, 当其内容较少时时,也...

假定有二个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%高度,当搜到的内容较少时,不至于页面太短。

    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 用标准件的方式来组装网页DIV布局-WEB标准网站设计心得
  • 非常漂亮的Div+CSS布局入门教程第1/5页
  • 使用JQUERY进行后台页面布局控制DIV实现左右式
  • DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
  • DIV+CSS布局的网站对网站SEO的影响分析
  • div+css布局必了解的列表元素ul ol li dl dt dd详解
  • DIV+CSS布局教程大全与pdf电子书 下载
  • DIV+CSS网页另类上下布局的实例代码
  • div+CSS网页布局的意义与副作用原因小结第1/2页
  • 不用float实现div模块居中布局
  • div+css页面布局的五个小技巧
  • 布局用CSS+DIV的优点总结
  • 用div实现像table一样的布局方法
  • CSS顶级技巧大放送,div+css布局必知
  • 像table一样布局div
  • div+css布局必须要知道的css条件注释理论及实践第1/2页
  • div结合css布局bbs首页(div+css布局入门)
  • 推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第1/3页
  • 脚本控制三行三列自适应高度DIV布局
  • div+css布局入门
  • 通过javascript实现DIV居中,兼容各浏览器版本
  • 如何动态修改层(<div ....> </div>)的显示与否?
  • java命名空间javax.swing.text.html类html.tag的类成员方法: div定义及介绍
  • 父div高度不能自适应子div高度的解决方案
  • java命名空间javax.management类query的类成员方法: div定义及介绍
  • 难!!!在jsp文件的java代码片段中控制该网页上DIV的属性以达到隐藏或显示某div的目的???
  • java命名空间javax.imageio.plugins.jpeg类jpegqtable的类成员方法: k1div2luminance定义及介绍
  • 操作系统 iis7站长之家
  • java命名空间javax.imageio.plugins.jpeg类jpegqtable的类成员方法: k2div2chrominance定义及介绍
  • 常用的DIV+CSS的基本框架结构但不推荐都放一个div里
  • 在div中使用css让文字底部对齐的方法


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3