`

div高度为0解决

    博客分类:
  • css
 
阅读更多

         div高度是根据里面内容自适应撑开的,如果没有内容高度则为0;但div里面有内容高度仍是0,多半是因为元素浮动引起,div里面的元素浮动到其它地方,div里实际上没有内容,因而为0;

        用如下为例: 

<div>
  <a> <img></img></a>
</div>

         显示图片后,div高度可能为0,此时可以通过如下3种方式解决掉高度为0:

     1. 使用overflow属性:

           为div增加样式:

style="overflow:visible"

          这样即可撑满div,overflow可以取值:auto 出现滚动条;hidden:超过范围的隐藏(文字会显示不全)

 

   2. 增加div清除浮动:

       在被包含的元素下面,此例中为<a></a>下面增加:

<div class="clear"></div>

 清除浮动后,<a></a>将落入div中,不再浮动。

 

   3. 使用伪类after:

      为div增加样式:

      

/*利用:after伪元素*/ 
div:after { 
content:""; 
display: block; 
clear: both; 
} 

 

 

其它文章参考:

http://www.jb51.net/css/74450.html

分享到:
评论

相关推荐

    IE6等div 100%高度填满解决办法

    ### IE6等div 100%高度填满解决办法 在Web开发中,实现页面元素的高度自适应一直是前端开发者关注的重点之一。特别是在早期浏览器版本(如IE6)的支持上,由于这些浏览器对CSS标准的支持有限,使得实现某些布局效果...

    CSS解决未知高度的DIV垂直居中

    ### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中,实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说,这相对容易实现。但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知...

    DIV自动适应高度

    - **JavaScript解决方案**:对于不支持新布局模型的老浏览器,可以使用JavaScript监听DOM内容的变化,实时计算最高DIV的高度,并将其他DIV的高度设为此值。 4. **示例代码**: - 使用Flexbox的示例: ```html ...

    JS控制DIV自适应高度

    然而,这种方法不适用于所有情况,特别是当需要精确控制div高度时。 2. **JS监听内容变化**:可以使用JavaScript的事件监听器,如`MutationObserver`,来检测div内容的变化。一旦内容发生变化,就重新计算div的高度...

    父DIV自动适应子DIV高度

    在网页设计中,布局是至关重要的一个环节,而“父DIV自动适应子DIV高度”是一个常见的需求,尤其在响应式设计和动态内容加载时。这个主题涉及到CSS布局、盒模型理解以及动态高度处理等多个知识点。 首先,我们来...

    Div父容器不根据内容自适应高度的解决

    当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。

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

    有时候,我们需要一个`div`既能保持一个最小的高度,以确保页面的基本结构,同时又能根据内部内容自动扩展其高度,以适应不同数量的内容。这在网页设计中是一项常见的需求,尤其在响应式设计和动态内容加载的场景下...

    火狐在用offsetHeight获取div的高度时为0的解决方法

    火狐在需要获取div的高度时,往往需要用到offsetHeight,有时会碰到offsetHeight获取到为0的现象, 在使用IE或者火狐中,特别在目前div+css的方式,往往不定义div的高度,这是在添加div内容后,需要获取div的高度时...

    父div高度不能自适应子div高度的解决方案

    第一种解决方案是在父div的最下方加入一个空白div,这个空白div通过设置其字体大小为0(font:0px/0px sans-serif),使得该div本身不显示任何内容,但又能撑开足够的空间来适应内部子div的高度。其CSS样式可以是: ...

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

    在这个例子中,通过将 `font-size` 设置为 0,我们可以消除由默认字体大小引起的最小高度限制,从而使 `div` 的高度能够按照预期的 `height` 属性设定。 #### 方法二: ```css .style1 { height: 1px; background...

    html div没有被撑开的原因及解决办法

    此时,需要确保内联元素转换为块级元素或设置`div`的高度。 **解决方案:** 1. 将内联元素转换为块级元素,如`display: block;`或`display: inline-block;` 2. 或者为`div`设置固定或基于内容的高度,如`height: ...

    div模拟textarea,解决高度自适应

    解决textarea文字太多无法高度自适应问题,使用div模拟textarea

    子元素div高度不确定时父div高度如何自适应

    此容器同样设置"clear:both"和"overflow:hidden",从而达到清除浮动并使父元素div高度自适应的效果。这种方法同样需要添加额外的HTML标签,同样存在不符合代码优化原则的问题。 第三种方法是使用HTML中的"br"标签,...

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

    实现“最小高度能自适应高度IE.FF全兼容的div设置”涉及理解并熟练运用CSS的`min-height`属性,以及掌握各种跨浏览器兼容性策略,如条件注释、CSS Hack、Flexbox、CSS Grid以及JavaScript/jQuery的解决方案。...

    当DIV高度为自动时,背景颜色无法显示的解决方法

    然而,在不同的浏览器中,特别是老版本的Internet Explorer(IE6、IE7和IE8),`div` 的高度设置为 `auto` 时,可能会引发一些兼容性问题,其中最常见的是背景颜色或背景图片无法正确显示。这个问题主要源于这些旧版...

    ie6,ie7div高度兼容代码

    总之,“ie6,ie7div高度兼容代码”不仅是一段解决具体问题的技术代码,更是前端开发领域中关于浏览器兼容性、代码优化与测试实践的一个缩影。通过理解和掌握这些技巧,开发者能够在处理复杂项目时更加游刃有余,...

    高度塌陷的产生条件和解决方法

    这种方法可以解决高度塌陷问题,但是父元素转换为表格,影响页面美观。 7. 给父元素添加 overflow:auto/scroll; 我们可以给父元素添加 overflow:auto/scroll;来解决高度塌陷问题,例如: ``` .father { width...

Global site tag (gtag.js) - Google Analytics