`
liss
  • 浏览: 844154 次
  • 性别: 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前缀或属性,比如在IE6中使用_height代替min-height。但需要注意,这种方式只适用于IE6,对于其他现代浏览器则应该继续使用min-height属性。 在文章的实例中,通过设置一个类名为“test...

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

    为了解决IE6不支持min-width和min-height的问题,可以通过在CSS规则中添加特定的写法来实现。关键在于使用CSS的!important规则,以及针对IE6单独设置的宽度或高度值,来确保IE6能够正确地显示元素尺寸。具体的做法...

    CSS-高度css-height.docx

    在CSS(层叠样式表)中,`height`...在实际项目中,结合使用`min-height`和`max-height`可以确保元素在不同内容量和屏幕尺寸下保持良好的视觉效果。同时,理解各种单位的用法对于创建响应式和自适应的设计至关重要。

    使用CSS3-Media-Query技术适配Android平板屏幕分辨率和屏幕密度.docx

    使用CSS3 Media Query技术适配Android平板屏幕分辨率和屏幕密度 在移动应用开发中,适配各种Android平板设备的分辨率和屏幕密度是一个棘手的问题。使用CSS3 Media Query技术可以轻松解决这个问题。Media Query是一...

    兼容IE6的min-width、min-height的简单方法

    如果不希望依赖CSS的Bug或不兼容的属性,可以使用JavaScript来动态地对元素应用min-width和min-height的样式。这种方法的缺点是会增加页面的复杂度和执行负担,但它的优点是兼容性更好,而且对其他浏览器没有副作用...

    min-height和min-width两个最小高度和最小宽度兼容多浏览器版本

    在网页布局设计中,`min-height` 和 `min-width` 是两个非常重要的CSS属性,用于定义元素的最小高度和最小宽度。这两个属性允许我们在页面设计时确保元素至少占用一定的空间,即使内容较少,也能保持一定的视觉效果...

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

    在Web前端开发中,了解和正确使用`height`和`min-height`是非常基础且重要的技能。这两个CSS属性都与元素的高度设置有关,但它们的作用方式有所区别。 首先,`height`属性用于直接设置一个元素的高度。当你指定一个...

    CSS属性探秘系列(五):min-width

    在实际应用中,min-width通常和max-width、min-height、max-height等属性一起使用,以达到灵活控制布局尺寸的目的。比如,一个内容区域可能需要在内容足够时最大化宽度,但在空间受限时保持最小宽度。 综上所述,...

    min-height最小高度实现的解决方法,(兼容IE6、IE7、FF、Chrome)

    min-height属性是CSS的属性之一,用于规定元素的最小高度,但IE6和IE7并不支持这一属性。这使得前端开发人员不得不寻找各种兼容的解决方案。而在较新的浏览器FF(Mozilla Firefox)和Chrome中,min-height是被支持的...

    IE 6不支持min-height或max-width等属性的完美解决方案

    其中,`min-height` 和 `max-width` 属性在IE6中不受支持,这使得创建响应式布局或者确保元素最小高度成为了一大挑战。然而,通过一些技巧和 hack,我们仍然可以为IE6提供类似的功能。 **1. 利用IE6不识别`!...

    css属性索引----帮助你制作html网页

    `max-*`和`min-*`属性限制元素的尺寸,而`height`和`width`设置元素的尺寸。 背景属性,如`background-color`用于设定元素背景色,`background-image`添加背景图像,`background-position`控制图像的位置,`...

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

    IE6作为一款老旧的浏览器,对CSS的支持存在诸多限制,尤其是对于CSS3中的新特性,例如max-width和max-height等,都不被IE6原生支持。尽管如此,开发者们依然找到了一些方法来模拟这些功能,以确保网页在IE6中也能有...

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

    在IE6和IE7中,由于它们不完全支持CSS的高度自适应属性,所以单纯地使用 min-height:200px; 并不能实现高度的自适应,必须显式地设定 height:auto; 以确保DIV可以扩展到大于200像素的高度。此外,在一些情况下可能还...

    CSS3媒介查询----响应式开发原始版.pptx

    **CSS3媒介查询**是实现**响应式网页设计**的核心技术之一,允许开发者根据不同的设备特性和视口尺寸调整页面的样式。响应式设计的目标是确保网页在各种屏幕大小,从移动设备到桌面电脑,都能提供优秀的用户体验。...

    css控制图片缩放,不担心拉升,变小

    同时,如果想要限制图片的最小尺寸,可以使用`min-width`和`min-height`属性,以确保图片不会因缩放过小而变得模糊不清。例如: ```css img { min-width: 200px; min-height: 150px; max-width: 100%; height: ...

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

    在网页设计中,`min-height`(最小高度)和`max-height`(最大高度)是CSS3中非常实用的属性,它们允许元素根据内容自动调整大小,同时限制其高度的上下限。然而,这些属性在老旧的Internet Explorer 6(简称IE6)...

Global site tag (gtag.js) - Google Analytics