<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

 <title>Div高度自适应</title>  

 <style type="text/css">  

 #wrap{overflow:hidden;}  

 #sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}  

 </style>  

 </head>  

 <body>  

 <div id="wrap" style="width:300px; background:#FFFF00;">  

 <div id="sidebar_left" style="float:left;width:100px; background:#777;">居左</div>  

 <div id="sidebar_mid" style="float:left;width:100px; background:#999;">  

 居中<br />  

 居中<br />  

 居中<br />  

 居中<br />  

 居中<br />  

 居中<br />  

 居中<br />

 居中<br />  

 居中<br />  居中<br />  

 居中<br />  居中<br />  

 居中<br />  居中<br />  

 居中<br />  居中<br />  

 居中<br />  居中<br />  

 居中<br />  居中<br />  

 居中<br />  居中<br />  

 居中<br />

 </div>

 <div id="sidebar_right" style="float:right;width:100px; background:#888;">居右</div></div>  

 </body>  

 </html>

方法二：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<div style="width:500px;background:#cccccc;height:0px;">

<div id="right" style="width:380%;height:100%;float:left;border:1px solid #265492;">left</div>

<div id="left" style="width:60%;;float:left;background:#376037;">

right<br>

right<br>

right<br>

right<br>

right<br>

right<br>  

</div>

</div>  

<script type="text/javascript">

<!--    -->

var a=document.getElementById("left");

var b=document.getElementById("right");

if(a.clientHeight<b.clientHeight){

a.style.height=b.clientHeight+"px";

 }else{

   b.style.height=a.clientHeight+"px";

 }  

 </script> 

</body>

</html>

方法三 背景图填充法

这是大站用得比较多的方法，如163等，研究了一下，结果如下。

这里是给父DIV设置了背景图片填充，所有DIV都不设高度。

HTML代码：

view sourceprint? <div class="endArea">  

 <div class="col1">第一列　左边正文</div>  

 <div class="col3">第二列　右边<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div>  

 <div class="col2">第三列　中间图片</div>  

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

 </div> 

CSS代码：

view sourceprint? .endArea{margin: auto; width:960px; background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif); clear:both;}  

 .endArea .col1{float:left; width:573px; }  

 .endArea .col2{float:left; width:25px; }  

 .endArea .col3{float:right; width:362px;}

Div中高度自适应增长方法的更多相关文章

  1. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  2. 里面的div怎么撑开外面的div让高度自适应

    参考网址:http://www.jb51.net/css/140685.html 随着微软新操作系统的上市,ie6现在用的人越来越少了,但是XP系统看来是太过经典,仍然有相当多的用户在使用,且这部分人 ...

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

    在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...

  4. 里面的div怎么撑开外面的div,让高度自适应

    关于容器高度自适应的兼容性问题.1.有些时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-h ...

  5. div实现高度自适应的textarea

    textarea使我们常常使用的一种表单形式,多用于大段文字的输入,大多数情况下,textarea都是可以满足需求的,但是当我们希望这个输入框高度自适应的时候,textarea就很难做到了. ok,主 ...

  6. element table固定表头，表的高度自适应解决方法

    主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...

  7. iframe高度自适应的方法

    第一种:iframe内容未知,高度可预测 这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度.常用的兼容代码有: // document.do ...

  8. [Asp.Net Core] - 设置 Syncfusion / RichTextEditor 移除超链接及高度自适应 的方法

    背景 使用 Syncfusion / RichTextEditor 对录入后的信息进行展示:1. 希望内容高度自适应.2. 希望禁用原文中的超链接.   实现 <div class=" ...

  9. WPF中RichTextBox高度自适应问题解决方法

    最近做一个项目需要用到RichTextBox来显示字符串,但是不允许出现滚动条,在RichTextBox宽度给定的条件下,RichTextBox的高度必须正好显示内容,而不出现下拉滚动条. 这样就要计 ...

随机推荐

  1. centos yum 使用笔记

    yum 参数说明yum -y # 表示自动选择 基本使用# yum -y install 包名(支持*) :自动选择y,全自动# yum install 包名(支持*) :手动选择y or n# yu ...

  2. bootstrap组件学习

    转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...

  3. JS阻止链接跳转代码

    刷新后focus在第一个标签 onload="$('#input_email').focus(); " $(document).ready(function(){ $(" ...

  4. javascript中的真假值、数据类型判断以及+的特殊用法

    一.javascript中的假值 jQuery中拥有一组数量奇大的假值,包括 0,NaN(非数),''(空字符串),false,null,undefined 这些值在if判断中全部等于假,但这些值彼此 ...

  5. RDIFramework.NET ━ 9.5 组织机构管理 ━ Web部分

    RDIFramework.NET ━ .NET快速信息化系统开发框架 9.5 组织机构管理 -Web部分 组织机构管理模块提供直观方便的组织机构管理,以树型结构显示单位和部门的机构体系,可根据需要进行 ...

  6. 结合WebSocket编写WebGL综合场景示例

    在WebGL场景中导入多个Babylon骨骼模型,在局域网用WebSocket实现多用户交互控制. 首先是场景截图: 上图在场景中导入一个Babylon骨骼模型,使用asdw.空格.鼠标控制加速度移动 ...

  7. vsftpd.conf Details

    引用:http://blog.chinaunix.net/uid-23257894-id-2466823.html /etc/vsftpd/vsftpd.conf文件详解,分好类,方便大家查找与学习 ...

  8. 数据可视化：Echart中k图实现动态阈值报警及实时更新数据

    1 目标 使用Echart的k图展现上下阈值,并且当真实值超过上阈值或低于下阈值时候,标红报警. 2 实现效果 如下:

  9. Java面试题问与答——编译时与运行时

    在开发和设计的时候,我们需要考虑编译时,运行时以及构建时这三个概念.理解这几个概念可以更好地帮助你去了解一些基本的原理.下面是初学者晋级中级水平需要知道的一些问题. Q.下面的代码片段中,行A和行B所 ...

  10. apache+php+mysql的配置(转载)

    windows: 按http://jingyan.baidu.com/article/fcb5aff797ec41edaa4a71c4.html的安装 按http://www.jb51.net/art ...