zoukankan      html  css  js  c++  java
  • 设置DIV根据内容自动调整高度的三个方法

    Div即父容器在Firefox、Chrome、Safari中不会根据内容自动调节高度,我们看下面的HTML代码:

    <divid="main"><divid="content"></div></div> 

    当Content内容很多时,即使main设置了高度100%或auto。在除IE外的其他浏览器中还是不能完好的自动伸展。也就是说,内容的高度容器main的高度还是没有自动撑开。

    我们有三种方法可以解决这个问题。

    一,增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。Html代码如下:

    <divid="main"><divid="content"></div><divstyle="font: 0px/0px sans-serif;clear: both;display: block"></div></div> 

    二,增加一个容器,在代码中存在,但在视觉中不可见。Html代码如下:

    <divid="main"><divid="content"></div><divstyle="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div></div> 

    三,增加一个BR并设置样式为clear:both。Html代码如下:

    <divid="main"><divid="content"></div><brstyle="clear:both;"/></div> 
  • 相关阅读:
    webpack
    localStorage使用总结
    html5 的localstorage
    js 的登录验证
    webpack vue2.0项目脚手架生成的webpack文件
    vue2.0 keep-alive最佳实践
    npm 的指令介绍
    vue2.0 子组件和父组件之间的传值
    electron的通信
    electron 的窗口设置最大化 最小化
  • 原文地址:https://www.cnblogs.com/lxboy2009/p/5212054.html
Copyright © 2011-2022 走看看