`

chrome中两层以上Div嵌套时,高度无法自适应的问题

    博客分类:
  • html
阅读更多
  <div id="div1">
    <div id="div2">
    </div>
  </div>

如上所示,div1与div2的高度都不设定时,div1会随着div2的内容而自动调整高度。

  <div id="div1">
    <div id="div2">
      <div id="div2_1">
      </div>
    </div>
  </div>

如果加入了div2_1,这时候div2无法随着div2_1的内容而自动调整高度。

解决办法:在div2的sytle中加入height:100%;overflow:auto;,这样div2可以随着div2_1的内容而自动调整高度。div1也会随之调整高度。
(方法适用于chrome,IE6,IE8)
分享到:
评论

相关推荐

    div嵌套的div溢出时换行

    在网页设计中,"div嵌套的div溢出时换行"是一个常见的布局问题,尤其在处理响应式设计或者自适应屏幕尺寸时显得尤为重要。这个问题涉及到CSS(Cascading Style Sheets)布局、盒模型以及流体布局等概念。下面将详细...

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

    在网页布局设计中,`div ul li` 的嵌套结构是一种常见的实现列表展示的方法,尤其在构建导航栏、产品展示等场景中。然而,当我们在这样的结构中动态添加多个 `li` 元素时,如何让包含它们的 `div` 自动调整高度以...

    div+css入门

    例如,`#PageBody`包含了`#Sidebar`和`#MainBody`两个子`div`,这种嵌套关系有助于创建多列或复杂布局。\n\n6. **CSS样式规则**:在CSS文件中,我们定义每个`div`的样式,如`width`、`height`、`margin`和`...

    A008-014HTML电脑端DIV布局杭州1页.zip

    HTML电脑端DIV布局是网页设计中的核心技术之一,尤其在构建响应式和动态网站时不可或缺。在"A008-014HTML电脑端DIV布局杭州1页.zip"这个压缩包中,包含的文件很可能是用来展示一个基于HTML的电脑端网页布局示例,...

    css浏览器兼容整理

    8. **div嵌套时y轴上外层div到内层div的距离的问题** - 这通常是由于`margin`、`padding`和`border`的计算方式不同所导致的。确保理解并正确使用这些属性。 9. **padding,margin,height,width的傻瓜式解决技巧...

    ext-3.21.rar 整合了css+div+js的高效完美ExtJS

    9. **兼容性**:ExtJS 3.2.1在发布时兼容大多数主流浏览器,包括IE6+、Firefox、Chrome、Safari等,这为开发者提供了广泛的用户基础。 10. **社区和生态系统**:ExtJS拥有活跃的开发者社区,提供大量的插件、示例和...

    jqueryflowtext是一款简单实用的jQuery响应式文字插件

    `jQuery Flowtext` 主要依赖于 jQuery 库,因此其兼容性与 jQuery 相同,支持大部分现代浏览器,包括 Chrome、Firefox、Safari、Edge 和 IE9 及以上版本。然而,由于其基于 JavaScript 实现,对于移动设备和低性能...

    网页制作培训大纲

    这里主要探讨div的嵌套和浮动,以及margin和padding的巧妙应用,这些是创建响应式和自适应布局的关键。同时,课程会介绍主流浏览器(如Chrome、Firefox、Safari等)的特点,以及如何处理常见的浏览器兼容性问题和bug...

    2021前端面试题精编.pdf

    CSS的盒子模型包括了内容(Content)、内边距(Padding)、边框(Border)和外边距(Margin)四个部分,标准的CSS盒模型中,设置的宽度和高度只包括内容区域,而低版本的IE盒模型中,设置的宽度和高度会包括内容、内...

    HTML5网页设计制作基础大二dreamweaver作业、使用HTML+CSS技术制作博客网站(5个页面)

    - **兼容性测试**:确保网站能在不同浏览器(如Chrome、Firefox、Safari等)和不同设备上正常显示,避免出现布局错乱的问题。 以上是对该作业中涉及的主要知识点的总结,通过综合运用这些技术,可以创建出既美观又...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -这个BUG导致Asp.net compatibility中的示例无法完成,现在已经修正。 +去除PageManager中方法AddAjaxAspnetControls,增加属性AjaxAspnetControls。 -这个属性和Button得ValidateForms属性类似,可以查看Asp...

    面试.docx

    8. **清除浮动**:使用clear属性(clear:both)或者创建一个含有clear属性的空元素,或者使用clearfix类解决浮动元素导致的父元素高度塌陷问题。 9. **闭包**:闭包是一种函数特性,能够记住其词法作用域内的变量,...

    面试宝典之吊打面试官系列

    - **问题**: css中可以让文字在垂直和水平方向上重叠的两个属性是什么? - **答案**: `vertical-align` 和 `text-align` 可以实现这一效果。 **26. 浮动元素垂直居中** - **问题**: 如何垂直居中一个浮动元素? - *...

    仅限于自己用的web前端面试题

    - **选项A**:当图片无法显示时,`alt` 属性作为图片的替代文本出现;`title` 属性则提供额外的信息或描述,当鼠标悬停在图片上时会显示出来。因此,选项A是正确的。 - **选项B**:与A相反,因此是错误的。 - **选项...

    ExtAspNet_v2.3.2_dll

    -这个BUG导致Asp.net compatibility中的示例无法完成,现在已经修正。 +去除PageManager中方法AddAjaxAspnetControls,增加属性AjaxAspnetControls。 -这个属性和Button得ValidateForms属性类似,可以查看Asp...

    前端面试题汇总

    - 当两个相邻的块级元素的外边距发生重叠时,实际应用的外边距为两者中的最大值。 - 解决方案:通过设置 `clear:both;` 或使用负 `margin` 来避免重叠。 **24. rgba()和opacity的透明效果差异** - **rgba()**:可以...

    简单布局

    2. **浏览器开发者工具**:如Chrome DevTools、Firefox Developer Tools,允许实时查看和修改网页元素的样式,调试布局问题。 3. **预处理器**:如Sass、Less,提供变量、嵌套规则等特性,让CSS编写更加模块化和可...

    Bootstrap CSS组件之按钮组(btn-group)

    Bootstrap中的按钮组(`btn-group`)是CSS组件之一,它允许你将多个按钮组合在一起,创建出功能丰富的用户界面。按钮组提供了多种布局和尺寸选项,能够适应不同的设计需求。 `.btn-toolbar` 是一个用于组合多个`btn-...

    challenge_web

    例如,`&lt;div&gt;`元素常用于分组其他元素,而`&lt;img&gt;`则用于插入图像。 标签是HTML的核心,它们定义了元素的功能。在"Challenge_web"项目中,可能会遇到以下常见的HTML标签: 1. `&lt;html&gt;`:文档的根元素,包裹整个HTML...

Global site tag (gtag.js) - Google Analytics