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

DIV最小高度且自适应高度

阅读更多

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

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

.div{
	height:auto!important;
	height:100px;
	min-height:100px;
}
 

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

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

 

--2011-01-13

 

而在IE8和chrome当中,上述方法是不行的。

想要实现必须在撑高的div下面加个空div

 

<div style="clear:both;"></div>
分享到:
评论

相关推荐

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

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

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

    这就需要我们寻找一种方法来兼容不同的浏览器,使得`div`能同时具备最小高度和自适应高度的特性。 解决这个问题的一种常见技巧是利用CSS中的`height`、`!important`和`min-height`属性。下面是对这个技巧的详细解释...

    css+div自适应窗口宽度

    在示例代码中,`.divGlobal`, `.DivTop`, `.DivBottom`这三个类都设置了`min-width`为760px,这表示这些div元素的最小宽度为760像素。当浏览器窗口宽度小于760像素时,这些div元素的宽度将不再缩小,以保证内容的...

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

    在网页设计中,我们经常需要对`&lt;div&gt;`元素进行高度控制,以便实现更好的视觉效果。...通过设置最小高度和自适应高度,我们可以确保在任何情况下,`&lt;div&gt;`都有良好的视觉表现,同时保持内容的可读性和布局的稳定性。

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

    在网页设计中,经常会遇到需要设定一个div元素同时拥有最小高度并且高度能够根据内容自适应,同时还要求在不同的浏览器下保持一致的显示效果。尤其是在IE(Internet Explorer)和FF(Firefox)浏览器之间,这两款...

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

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

    textarea高度自适应js代码

    min_height: 50, // 最小高度 max_height: 300 // 最大高度 }); ``` ... ``` 这个插件可以帮助开发者提高用户体验,特别是在处理用户输入大量文本的场景下。理解其工作原理和用法,能有效地在项目中应用这一功能...

    最小高度能自适应高度IE.FF全兼容的div设置特效代码

    标题 "最小高度能自适应高度IE.FF全兼容的div设置特效代码" 涉及的是前端开发中的一个常见问题,即如何在不同浏览器(尤其是IE和Firefox)中实现一个div元素的最小高度自适应其内容高度,并保持良好的兼容性。...

    iframe高度自适应

    - `200`:最小高度限制,避免内容过少时高度过低。 ##### 2. 使用CSS Flex布局 利用CSS Flex布局也可以实现`&lt;iframe&gt;`的高度自适应。 ```html &lt;div class="container"&gt; ...

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

    总的来说,通过合理设置 `li`、`ul` 和 `div` 的高度属性,以及使用 `clear:both` 解决浮动问题,我们可以实现 `div` 高度自适应 `li` 的功能。当在 `ul` 中添加更多 `li` 时,这个结构会自动扩展其高度以适应新的...

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

    总结起来,要实现外部 `div` 高度自适应内部 `div` 的效果,可以结合使用 `min-height` 和清除浮动的策略。对于 IE6 及其之前的版本,需要特别处理以确保兼容性。随着浏览器更新换代,现代浏览器已经很好地支持了...

    Firefox div高度自适应

    1.如果div想要一个最小高度,那么应该用css的minheight这个属性,但是IE不支持,考虑到大多数用户都使用IE,所以一般情况下这个属性基本上弃置不用。在IE里面,height基本上就可以当作minheight来用,因为如果内容...

    div模拟textarea文本域实现高度自适应效果代码

    如果内容不足以填满最小高度,div会保持默认的最小高度;如果内容超出了最大高度,则会在内部显示滚动条。 对于一些较旧的浏览器,比如IE6,它不支持min-height和max-height属性,但元素内部溢出的子元素仍然能够...

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

    1. **高度自适应(Height Auto Adjustment)**: - `auto`值:在CSS中,将Div的高度设置为`auto`可以使它根据内部内容自动调整高度。例如: ```css div { height: auto; } ``` - 使用`display: flex;`或`...

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

    往往会让DIV或其他元素自适应高度,可是当发布者发布的内容比较少的时候,比如只有一行字,那内容部分就变的很小,不美观,可是我们直接设置一个高度的话,当内容很多时又会溢出,今天研究了一下兼容各浏览器设置DIV...

    html图片自适应手机屏幕大小的css写法

    总结以上知识点,我们了解到在HTML中使用CSS实现图片自适应手机屏幕大小的关键在于使用百分比宽度和自动高度的组合,确保盒模型的一致性,以及通过CSS Reset和重置默认布局减少浏览器间的差异。这些方法共同确保了在...

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

    ### CSS `min-height` 在IE6、IE7与Firefox下的DIV自适应高度解决方案 #### 背景介绍 在Web开发的历史长河中,不同浏览器对CSS的支持程度一直是开发者们面临的一大挑战。尤其是在早期,Internet Explorer 6 (IE6) ...

Global site tag (gtag.js) - Google Analytics