`
tracyjuan
  • 浏览: 10851 次
  • 性别: Icon_minigender_2
  • 来自: 郑州
社区版块
存档分类
最新评论

div自动适应内容的高度

阅读更多
我们看下面的代码:
<div id="main">
<div id="content"></div>
</div>

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

  我们可以通过三种方法来解决这个问题。
  一,增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。
<div id="main">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

  二,增加一个容器,在代码中存在,但在视觉中不可见。
<div id="main">
<div id="content"></div>
<div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div>
</div>

  三,增加一个BR并设置样式为clear:both。
<div id="main">
<div id="content"></div>
<br style="clear:both;" />
</div>

以上这些方法要添加到父div之下,如果添加到子div里面父div是没法识别的,父div的高度依然没法撑开
分享到:
评论

相关推荐

    DIV自动适应高度

    DIV自动适应高度,设置三个DIV高度始终保持一致,不管其中哪个高度变化都会保持DIV向最高的看齐

    父DIV自动适应子DIV高度

    NULL 博文链接:https://xnbhnly.iteye.com/blog/1312073

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

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

    自适度div高度

    自适度div高度,js获取元素位置和窗口高度,自动适应,也可以使用在父框是iframe,有完整的js实例

    控制一个DIV内所有图片宽度超出后自动调整为指定大小

    直接通过CSS控制一个DIV内所有图片宽度超过650PX时.自定为650PX;高度自适应! 些CSS代码是目前最简单有效的自动调整图片尺寸的方法,且兼容IE6 IE7 IE8 和FF等版本的浏览器

    DIV+CSS 兼容小集

    },目的就是让div自动适应内容高度 2、横排的div外套div 另外设定 ul { margin: 0px; padding: 0px; } 是消除li前面的空格 div+css兼容性问题 CSS 兼容要点:DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, ...

    div或img图片高度随宽度自适应的方法

    该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动。 一、可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了)。 利用js来实现...

    DIV CSS iframe 实现的主页布局

    通过Div+CSS 结合Jquery制作的具有左侧菜单、导航菜单、下拉菜单、自动适应窗口大小、自动控制iframe高度,动态修改CSS样式,利用CSS的expression表达式,自动调整div大小,实现div左侧跟随的诸多布局应用。

    CSS+DIV布局(满屏自适应三行布局,兼容FF,div垂直居中)

    CSS+DIV写的,上下固定高度,中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~

    纯Css实现Div高度根据自适应宽度(百分比)调整

    然而,用的最多的标签一哥Div却不能做到自动调整(要么从父级继承,要么自行指定px,要么给百分比!但是这个百分比是根据父级的高度来计算的,根本不是根据元素自身的宽度,那么就做不到Div的宽高达成一定的比例=-=...

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

    div ul li 嵌套的使用在网页布局中很常见,最主要的问题就是如何解决增加多个li后DIV高度自动适应问题,本文有个不错的示例,可以解决此问题,大家可以尝试运行下

    div+css布局中常用方法总结

    1、让文本框textarea适应内容自动伸缩高度:textarea style="width:300px; overflow-y:visible" 2、cursor:pointer 使鼠标变成手形 3、word-wrap:break-word;控制是否断词 ......

    svelte-virtualized-auto-sizer:自动调整单个孩子的宽度和高度的高级组件

    自动调整单个孩子的宽度和高度的高级组件。 在了解有关此组件的更多信息安装npm install --save-dev svelte-virtualized-auto-sizer文献资料请在“ react-virtualized软件包”中“ AutoSizer”的API文档。 在道具...

    IE Firefox在css中的差别 (部分)

    3、高度问题 问题:如果设置了一个DIV的高度,当DIV里实际内容大于所设高度,ie会自动拉伸以适应DIV容器大小,ff会固定DIV的告诉,超过部分超出DIV底线以外,出现和下面的内容重叠的现象 解决:控制恰当的高度,或者...

    多行文字实现垂直居中

    div+css多行文字实现垂直居中,高度可自动适应

    EasyUI布局 高度自适应

    如果在datagrid上方还有其他div的话,datagrid就不能很好的自动适应窗体。如查datagrid有分页控件,分页控件就看不到了。这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样...

    图片不间断滚动js特效及思路

    5、对于翻屏滚动或间歇滚动,要注意各滚动单位间的间距,同时需要对容器的可视高度和可视宽度做好准确的设置,对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整 6、对于LI自动换行的问题...

    [原创]基于JQUERY的可绑定菜单列的工具栏控件

    可以定义让UI是的高度是否固定高度,还是自动适应内容框的高度(仅当标签头在顶部或底部时有效) 可以用AJAX从服务端获取要初始化渲染的工具栏组,操作单元组,菜单等JSON参数,然后实时渲染出控件界面 经测试,...

    matlab图片频域分析代码-DIVP-ALL-EXPERIMENTS:一本关于DIVP的简短书籍,说明了实用考试的提示,技巧和窍门

    如果其中一个可用,该功能将在保持原始宽高比的同时自动拍摄另一个。 r = imresize(gray,[newWidth, newHeight]); 或者 % When height is to be scaled in aspect ratio r = imresize(gray,[newWidth, NaN ]); % ...

    IE6下不能设置height:1px的元素是什么原因如何解决

    bug出现原因: 在用DIV构建网页的时候,有时候需要的高度很小,这时候就可能会出现问题,因为,IE6下DIV有个默认的高度,大约10-12px。...直接限制自动调整 复制代码代码如下: &lt;div xss=removed&gt;&lt;/div&gt;

Global site tag (gtag.js) - Google Analytics