`
anke1460
  • 浏览: 43418 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

div控制最小高度又自适高度

阅读更多
我们在用div布局的时候经常会遇到这样的一种情况:我们需要设置一个div的高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是自适应高度。当里面的信息很少时候,我们就设置它一个最小的固定高度。

        我们知道,在ie6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可。 但是在ie7和firefox就不行了,它不会自动撑开。

        如果要设置自适应高度,我们可以采用height:auto;这个属性;不过这个属性ie6又不支持了。是不是很头痛?其实解决这个问题不难,而且方法也不少,这里推荐一种:(假设我们需要控制的这个div的最小高度是100px,超过时就让里面的信息自动撑开):

.div{

height:auto !important;

height:100px;

min-height:100px

}

注释:因为 !important在ie7和ff都可以读到,而且权重高于后面的height:100px;所以当在ie7和ff显示的时候,就会用了前面的height:auto !important;而ie6识别不了!important,auto对它也不管用,因此会应用了后面的height:100px的样式;而min-height:100px表示最小高度为100px;此属性在ie7和firefox都可以识别。

这样一个完美的即可以设置最小高度,有可以自适应高度的css样式就出来了,同时兼容了ie6、ie7和firefox!

分享到:
评论
1 楼 287854442 2011-04-15  
完美。
我在IE 6,7,8,firefox3.6 chrome下测试均正常。赞一个!

相关推荐

    如何设置 div 的最小高度.docx

    设置 `div` 的最小高度是一项重要的任务,特别是在响应式设计或者内容动态填充的场景下。然而,在 Internet Explorer 6 (IE6) 这个古老的浏览器版本中,设置 `div` 最小高度会遇到一些特定的问题。 ### IE6 的默认...

    最小高度能自适应高度IE.FF全兼容的div设置.rar

    标题"最小高度能自适应高度IE.FF全兼容的div设置.rar"和描述"最小高度能自适应高度IE.FF全兼容的div设置"所指向的知识点,主要涉及到CSS(层叠样式表)中的最小高度(min-height)属性以及如何实现跨浏览器的兼容性...

    div层高度可拖动demo

    4. **边界检查**:为了防止`div`高度超出预定范围,我们需要设置最小和最大高度限制,并在每次调整时进行检查。 5. **兼容性处理**:由于不同的浏览器可能对某些CSS属性或事件处理有不同的实现,因此需要确保代码在...

    CSS调整DIV最小高度问题探讨

    当我们在设计网页时,经常需要对`div`的大小进行控制,包括它的最小高度。本篇文章将深入探讨如何通过CSS来调整`div`的最小高度,并结合实际示例解释其工作原理。 首先,我们需要理解`div`的默认行为。当`div`包含...

    IE6 div最小高度去除方法以及IE6div垂直居中css样式

    通过将`font-size`设为0,可以消除由默认字体大小引起的额外高度,从而实现对`div`最小高度的控制。 接下来,我们讨论IE6中`div`的垂直居中问题。在CSS中,让一个元素在页面上垂直居中并不总是那么简单,特别是对于...

    设置DIV最小高度以及高度自适应随着内容的变化而变化

    结合上述属性,我们可以创建一个既能保持最小高度又能自适应内容高度的`<div>`。在提供的代码示例中,`.divHeight`类应用了以下样式: ```css .divHeight { height: 400px; /* 初始化高度 */ height: auto; /* 这...

    CSS:Div高度、宽度自应等技巧演示文件集合。

    在CSS中,我们可以为Div设置样式,包括高度(height)、宽度(width)和其他属性,以控制其显示效果。 1. **高度自适应(Height Auto Adjustment)**: - `auto`值:在CSS中,将Div的高度设置为`auto`可以使它根据...

    拥有最小高度能自适应高度同时全兼容IE、FF的div设置

    总的来说,为了使div元素在不同浏览器中都具有最小高度并且能够自适应内容的高度,可以通过合理设置`min-height`属性,并辅以针对旧版浏览器的特殊处理和CSS优先级控制,以达到一致的显示效果。这种方法适用于需要...

    设置一个div层的最小宽度或最小高度

    总结来说,通过合理设置div层的最小宽度或最小高度,能够有效地控制布局在不同设备和屏幕尺寸上的显示效果。这样的做法有助于提高Web页面的可用性和用户体验,特别是在响应式网页设计中,这一技巧显得尤为重要。

    CSS控制div宽度最大宽度/高度和最小宽度/高度的方法

    对于最小高度和最大高度,我们可以这样设置: ```css .min_height { min-height: 200px; } .max_height { max-height: 400px; } ``` 然而,这些CSS3属性在较老的Internet Explorer(尤其是IE6)中可能不被支持...

    DIV进阶效果集(圆角div、div自适应宽度、背景色渐变等)

    `min-height`定义了`div`的最小高度,当内容增加时,`div`的高度会自动扩展: ```css .expanding-div { min-height: 200px; } ``` 以上就是关于“DIV进阶效果集”的一部分内容,包括圆角`div`、自适应宽度、背景...

    里面的div怎么撑开外面的div让高度自适应

    当需要容器具有最小高度,并在内容增加时自动扩展时,可以使用 `min-height` 属性。但是,对于不支持此属性的 IE6,我们需要使用一种叫做“hack”的技巧来解决。以下是一种常见的兼容性写法: ```css .container...

    div+css最小高度的实现代码(兼容ie6/ie7/ie8/firefox)

    为了在IE6、IE7、IE8、Firefox等主流浏览器中都能实现DIV最小高度的兼容性设置,我们通常需要利用各浏览器对CSS属性的解析差异。具体到本例中的代码实现,我们通过设置多个CSS属性来达到跨浏览器兼容的目的。这里的...

    div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题

    2. **定义 `ul` 的最小高度和自动高度**:`.main_div ul` 中的 `min-height:205px; height:auto;` 设定使得 `ul` 至少有 205px 高,但当 `li` 增多时,`ul` 的高度会自动增加以包含所有的 `li`。 3. **使用 `clear:...

    div+css最小高度的设置方法兼容各浏览器ie6+/Firefox

    有时候,我们希望一个`div`元素具有最小高度,以便在内容较少时保持一定的视觉效果,同时在内容较多时能自动扩展以容纳所有内容。标题和描述中提到的问题,即如何在各种浏览器(包括IE6+和Firefox)中设置`div`的...

Global site tag (gtag.js) - Google Analytics