在平时做DIV+CSS的开发中，经常会遇到，把一个div的高度固定，然后，里面在嵌套一个div，但是里面的div的内容增多的时候，可以把外面的div撑开，但同时又保证里面的div没有东西是，外面的div保持一定的高度。主要解决办法是在外面的div使用min-height这个属性，来保证他的高度，这个属性支持IE7以上各个版本和FF 、chrome等浏览器，但是IE6不支持，因此还要加多一个：_height 。
下面我做了一个demo：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*out 有它自己的最小高度200px，可以自动适应in的自动扩展*/
body {width:100%; height:100%;}
.out{
width:500px;
overflow:hidden; min-height:200px;
_height:200px; _overflow:auto;
background-color:#09C;
}
.in{
width:300px;
background-color:#FFF;
}
.bottom{
width:500px;;
height:60px;
background-color:#900;
}
</style>
</head>
<body>
</body>
<div class="out">
<div class="in">
撑开<br />
撑开<br />撑开<br />
撑开<br />
撑开<br />撑开<br />
撑开<br />
撑开<br />撑开<br />
撑开<br />
撑开<br />撑开<br />
撑开<br />
撑开<br />撑开<br />
撑开<br />
撑开<br />撑开<br />
撑开<br />
撑开<br />撑开<br />
</div>
</div>
<div class="bottom"></div>
</html>
分享到：
相关推荐
在网页设计中，布局是至关重要的一个环节，而“父DIV自动适应子DIV高度”是一个常见的需求，尤其在响应式设计和动态内容加载时。这个主题涉及到CSS布局、盒模型理解以及动态高度处理等多个知识点。 首先，我们来...
11. **高度自适应**：在包含浮动元素的容器中，IE可能无法自动适应高度。为了触发IE的布局私有属性，可以使用`zoom:1;`结合`overflow:hidden;`，这将确保容器包裹其内容。 12. **margin加倍问题**：在IE6中，设置为...
有时候，我们需要一个`div`既能保持一个最小的高度，以确保页面的基本结构，同时又能根据内部内容自动扩展其高度，以适应不同数量的内容。这在网页设计中是一项常见的需求，尤其在响应式设计和动态内容加载的场景下...
**解决方案**: 在所有浏览器中统一使用 `var` 关键字定义常量，避免兼容性问题。 ##### 3. event.x与event.y问题 - **IE**: 提供 `event.x` 和 `event.y` 属性，但无 `pageX` 和 `pageY`。 - **Firefox**: 提供 `...
以下是在使用Div和CSS制作网页时，确保兼容所有浏览器应注意的几个关键点： 1. DOCTYPE声明影响CSS处理：DOCTYPE声明位于HTML文档的顶部，它告诉浏览器使用哪种HTML或XHTML规范来解析文档。不同的DOCTYPE声明会影响...
### 浏览器兼容性解决方法：深入解析与实践技巧 在Web开发中，确保网站在不同浏览器上表现一致是一项挑战。本篇文章将基于提供的文件信息，深入探讨浏览器兼容性的解决方法，尤其针对Firefox、IE等主流浏览器进行...
本教程将介绍如何使用jQuery来实现一个兼容所有主流浏览器的带按钮的轮播效果。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在创建轮播效果时，jQuery的...
SuperSlide是一款强大的JavaScript幻灯片插件，由李晶开发，它提供了丰富的功能和高度的可定制性，如自动播放、触屏支持、动画效果等。这个插件适用于各种浏览器，包括IE6及以上版本、Firefox、Chrome、Safari以及...
总结来说，解决`div`最小高度兼容性问题的关键在于结合使用`min-height`、IE6私有属性`_height`以及`height:100%`。这种组合方法能够确保在各种浏览器环境下，元素既能保持最低的视觉效果，又能灵活地适应内容的变化...
【jQuery五屏上下滚动焦点图代码，兼容主流浏览器】 在前端开发中，视觉效果和用户体验是网站设计的重要组成部分。焦点图是一种常见的网页元素，用于展示多个相关图片或内容，通过切换来吸引用户的注意力。本教程将...
标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整，特别是高度，以便始终保持与浏览器窗口的高度同步，从而提供更好的用户体验。 首先，我们需要了解Iframe的基本结构...
在网页开发中，经常会遇到一个常见的布局问题：当一个包含浮动子元素的`<div>`容器无法自动扩展以适应其内部子元素的高度时，特别是在Internet Explorer 8 (IE8)这样的老旧浏览器中。这一问题不仅影响了页面的美观度...
- **问题描述**：在某些情况下，元素的高度可能无法根据内容自动适应。 - **解决方法**：使用CSS的`min-height`或Flexbox布局来确保元素的高度能够适应内容的变化。 ##### 17. IE6下图片下有空隙产生 - **问题描述...
这篇博客《Div高度兼容性问题》（原链接：https://peacherdiy.iteye.com/blog/803569）可能探讨了如何处理`<div>`高度自适应时遇到的兼容性问题，这些问题通常涉及到不同的浏览器对CSS样式解析的差异，尤其是在旧...
10. **自适应高度**：在某些情况下，需要确保包含浮动元素的父容器能自动适应其子元素的高度。可以使用`overflow:hidden`或`clearfix`类来实现，后者通过伪元素`::before`和`::after`创建一个隐藏的块元素来清除浮动...
当一个 `div` 的内容超过其设定的高度时，在 FF 中可能会出现与相邻 `div` 重叠的情况，而在 IE 中则会自动调整以适应内容的高度。为了避免这种现象，一种推荐的做法是不显式指定高度，让 `div` 自动调整大小。另一...
通过上述分析，我们可以看到“嵌入到HTML的iframe自动适应大小”这一知识点涉及到了HTML、CSS和JavaScript的综合运用，尤其是在处理不同浏览器的兼容性问题时显得尤为重要。在实际项目中，还需要考虑到性能优化，...
为了兼容所有浏览器，开发者应采用更通用的方法，如使用`margin: auto`结合`text-align: center`来实现居中效果。 3. **Padding的影响**：在Firefox中，当元素设置padding时，其实际大小会增加，这在IE中并不发生。...