转：解决Div自适应高度的方法

曾经终败给现在 2022-07-12 15:53 231阅读 0赞

原文地址：http://www.yutheme.cn/website/index.php/content/view/39/63.html

原文中的方法3好用:)

原文如下：

div高度自适应是个比较麻烦的问题，在朋友[artery][] 那里看到这个文章，帮我解决了不少问题，摘录下来:

Div即父容器不根据内容自适应高度，我们看下面的代码：

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

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

我们可以通过三种方法来解决这个问题。

1 增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。

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

2 增加一个容器，在代码中存在，但在视觉中不可见。

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

3 增加一个BR并设置样式为clear:both。

<div id="main">  
<div id="content"></div>  
<br style="clear:both;" />  
</div>

补充：

<div id="main">  
<div id="content">  
<p>demo1</p>  
<p>demo2</p>  
<p>demo3</p>  
</div>  
</div>

\#main \{ border:1px solid \#999999; background-color:\#CCCCCC; height:100%; overflow:hidden;\}  
\#content \{ float:left;\}

以上三个方法都不是最好的解决方法,因为在程序代码观念中是提倡尽量不要添加无意义的标签代码

介绍我的解决方法是直接在最外层div加以下样式

\#main \{  
height:100%;  
overflow:hidden;  
\}

[artery]: http://www.artery.cn/

发表评论取消回复

表情：

评论列表（有 0 条评论，231人围观）

还没有评论，来说两句吧...

相关阅读

相关 (转)让iframe自适应高度-真正解决

方法二 <iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" onload="ch

た入场券/ 2023年01月10日 03:45/ 0 赞/ 186 阅读

相关 vue div高度自适应

1.动态style绑定 <div :style="styObj"></div> 2.data定义 data(){ return{ s

浅浅的花香味﹌/ 2022年12月07日 01:25/ 0 赞/ 208 阅读

相关 div ul li 嵌套后解决高度自适应方法

方法一： div 自适应宽度很简单，你应该设置div的display:inline-block 然后不要设置宽度就行了方法二：

悠悠/ 2022年09月17日 12:22/ 0 赞/ 202 阅读

相关 CSS: 解决Div float后，父Div无法高度自适应的问题

在用CSS+DIV的布局中，经常会发现，当一个DIV float之后，如果他的高度超过了其父DIV的高度时，其父DIV的高度并不会相应的进行调整。要解决这个问题（也叫做闭合(清

柔情只为你懂/ 2022年08月27日 02:26/ 0 赞/ 181 阅读

相关转：解决Div自适应高度的方法

原文地址：http://www.yutheme.cn/website/index.php/content/view/39/63.html 原文中的方法3好用:) 原文如下：

曾经终败给现在/ 2022年07月12日 15:53/ 0 赞/ 232 阅读

相关 div模拟实现textarea（高度自适应）

div模拟实现textarea（高度自适应）简单贴出实现 CSS代码： .text_box { width: 400px;

- 日理万妓/ 2022年06月13日 13:57/ 0 赞/ 285 阅读

相关 div 自适应高度自动填充剩余高度

概述：记录一下，别人已经写得比较好了，下次方便检索地址：[http://www.cnblogs.com/pangguoming/p/5695184.html][htt

深藏阁楼爱情的钟/ 2022年05月18日 04:53/ 0 赞/ 266 阅读

相关 HTML-视频高度自适应解决方法

使用开源video.js 项目地址：[https://github.com/videojs/video.js][https_github.com_videojs_video

墨蓝/ 2022年05月17日 12:25/ 0 赞/ 819 阅读

相关 div高度根据内容物高度自适应的方法

示例： HTML中： <div class="lei"> <p>电脑</p> <ul> <li><b>台式

古城微笑少年丶/ 2022年01月31日 10:29/ 0 赞/ 476 阅读

相关 iframe自适应高度（转）

iframe自适应高度 ![此博文包含图片][sg_trans.gif](2013-04-23 17:29:49) <table> <tbody> <tr>

比眉伴天荒/ 2022年01月05日 05:51/ 0 赞/ 389 阅读