<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. ThinkPHP 3.2.3 关联模型的使用

    关于关联模型 ThinkPHP 3.2.3 的关联模型(手册地址)一般处理关联数据表的 CURD 操作,例如关联读取.关联写入.关联删除等. 实例 博客管理模块关于博客有 4 张数据表:博客表 crm ...

  2. ExtJS笔记 Grids

    参考:http://blog.csdn.net/zhangxin09/article/details/6885175 The Grid Panel is one of the centerpieces ...

  3. Jquery EasyUI使用总结（一）

    1,弹出Iframe,新窗口 //打开编辑页面要加载的数据 function ShowDialog(id, url, width, height, onLoadFunc) { $("#&qu ...

  4. 浏览器中Javascript的加载和执行

    在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...

  5. 一步一步来做WebQQ机器人-(一)(验证码)

    × Well done! 为了探究webqq的http请求流程和数据交互,我付出了很多心血. 写下这篇文章!!!这是我逝去的青春 系列写完之后我会把源码打包奉上~ ------我的征途是星辰大海 预计 ...

  6. 多线程 - CountDownLatch

    一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CountDownLatch.由于调用了 countDown() 方法,所以在当前计数到达 ...

  7. 在项目里交叉使用Swift和OC【转】

    Swift and Objective-C in the Same Project在项目里交叉使用Swift和OC Swift与OC的兼容性使得你可以在项目里使用Swift+OC的方式编写应用程序,称 ...

  8. LeetCode Reverse Words in a String II

    原题链接在这里:https://leetcode.com/problems/reverse-words-in-a-string-ii/ 题目: Given an input string, rever ...

  9. linux 下查看系统资源和负载，以及性能监控

    1,查看磁盘   df -h   2,查看内存大小   free   free [-m|g]按MB,GB显示内存   vmstat   3,查看cpu   cat /proc/cpuinfo   只看 ...

  10. pycharm下载 -professional

    Jet Brains 开发的PyCharm 我传到百度云上了.只供开发使用,违者必究.大家一起学开发.有谁有python 进阶 电子书,可以发到我的邮箱里:120946018@qq.com,谢谢 Ma ...