`
liss
  • 浏览: 826766 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

正确使用CSS的height和min-height

    博客分类:
  • CSS
CSS 
阅读更多

  在只需要兼容ie6的时候完全不需要注意min-height这个样式,ie6不支持这个样式。但是当你的页面需要照顾到ie7和ff的时候,这个样式一定要注意。因为很多在ie6下设置了height=固定值的样式,当容器被里面的东西撑的大于这个高度的时候,ie7和ff是不会自适应高度的。从而导致布局的混乱。要想在ie6,ie7和ff中都可以自适应高度,正确的做法是设置min-height和用cssHack设置height。

  例如:
      min-height:600px;
      _height:600px;

  这样,在容器里面的东西很少的时候,它显示固定高度600px,但当里面的东西很多的时候,它也会自适应的增长高度。
  对于height的设置一定要特别注意,如果是布局用的容器的height则需要特别的注意,否则在ff中会导致无法浮起,从而使布局混乱。 

分享到:
评论

相关推荐

    CSS中height和min-height的区别

    主要为大家详细介绍了CSS中height和min-height的区别,从简单实例出发为大家进行分析,感兴趣的小伙伴们可以参考一下

    IE6不支持CSS中的min-width/height属性问题的解决方法

    min-width与min-height在css中是相当好用的语法,可以让HTML元素最少仍保持一定的宽和高,而需要时仍随着元素的內容增加宽和高。

    Web前端新人笔记之height、min-height的区别详解

    * IE6不支持CSS min-height属性。最小高度的定义:1. 元素拥有默认高度;2. 当内容超出元素的默认高度时,元素的高度随内容增加而增加Figure 1:如下图的需求 * 如上图,两个区域的高度不一样。这就是 min-height 的...

    让IE6支持min-width最小宽度

    虽然CSS中的min-width、min-height、max-width、max-height属性在CSS中早有出现,不过支持此属性的浏览器使用比率都不高,比如Firefox。

    让IE6支持min-width和max-width的方法

    说明:让 IE6 及其以下版本支持 CSS 中 min/max-width/height 属性 代码如下: @if (@_win32 && @_jscript_version>4) var minmax_elements; minmax_props= new Array( new Array(‘min-width’, ‘minWidth’), new ...

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

    最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozilla 支持,IE7开始也支持了,但IE7处于测试阶段,等正式版发布到普及需一段...

    css2中文手册 学习css的必选

    height max-height min-height width max-width min-width 布局 Layout clear float clip overflow overflow-x overflow-y display visibility 外补丁 Margins margin margin-top margin-right margin-...

    CSS之IE BUG分析与解决

    2 当设定min-height时,在标准浏览器中,表现为与IE6设定固定高度相同,即当内容高度小于min-height时,高度为min-height值,当内容高度大于min-height值时,此时div自动扩展。 在标准浏览器中设定min-height为100时...

    video-js.min.css

    videojs直播 <video id="my-video" style="width:100%;min-width:40vw;height:260px;" class="video-js" autoplay controls preload="auto" data-setup="{}"> </video>

    CSS min-height IE6、IE7、FF下DIV自适应高度

    在DIV的CSS中加入这句:min-height:200px;height:auto; 这样在高度超过200px之后 ie6 7 ff下高度都能自适应

    IE6支持max-width/height与min-width/height(完美解决方案)

    1、IE6支持max-width解决方法 IE6支持最大宽度,解决CSS代码: 复制代码代码如下: .className { max-width:1000px; _width:[removed](document.documentElement.clientWidth||document.body.clientWidth)<1000?...

    rn-css:将CSS带到React-Native

    React-Native仅支持CSS的一个子集,但是使用rn-css您将能够像使用React一样对组件进行样式设置。 看: const MyComponent = styled . View ` width: 2em; height: 2em; border-radius: 50%; &:hover { ...

    jsizes:jQuery CSS大小属性插件

    JSizes ― CSS属性的jQuery扩展插件JSizes是一个小插件,它增加了查询和设置CSS min-width , min-height , max-width , max-height , border-*-width , margin和padding属性的便捷方法。 另外,它具有一种确定...

    IE7新支持的CSS属性和属性选择符

    以下是IE7中新支持的属性:min-height,max-height,min-width,max-width这个hack还可以使最大高度兼容IE6,你可以举一反三:{height:350px;overflow:hidden;}以下是IE7中新支持的属性选择符:精确属性匹配 [=] : 只有当...

    css 媒体查询 aspect-ratio less 使用方法

    css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配 使用样例如下:   // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内 适配 320*50 设计图样式 @media screen and (min-...

    vue组件实现文字居中对齐的方法

    继续学习Vue,这次是一个组件的制作过程 先让我们来看一下组件的预期效果 上图为公司自营的一个...min-height: 31px; display: flex; align-items: center; justify-content: center; height: 31px; margin-top: 5p

    让IE6支持最小高度min-height、最大高度max-height的方法

    1、IE6支持max-height解决方法 IE6支持最大高度解决CSS代码:  复制代码代码如下:.yangshi{max-height:1000px;_height:[removed](document.documentElement.clientHeight||document.body.clientHeight)<1000?”...

Global site tag (gtag.js) - Google Analytics