<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. Ogre代码学习之1——Ogre中地形lod的基础：deltaHeight的计算

    Ogre的地形系统中的重要概念:高度差,英文HeightDeltas,表示某个完整细节中的顶点,在某个它被隐去的lod中被插值之后的高度和原始高度(即高度图中的高度)之差. DeltaHeight = ...

  2. 3DTouch开发 （基础）

    一.3DTouch开发准备工作(让模拟器也支持 3DTouch 的解决办法) 需要支持3DTouch的设备,如iPhone6s或以上.iOS9或以上.Xcode7或以上,估计很多和我一样的屌丝还没有i ...

  3. 《Linux内核设计与实现》CHAPTER5阅读梳理

    <Linux内核设计与实现>CHAPTER5阅读梳理 [学习时间:2.5hours] [学习内容:系统调用的概念.功能及实现:系统调用的创建和使用方法] CHAPTER5 系统调用 1.系 ...

  4. LeetCode Missing Ranges

    原题链接在这里:https://leetcode.com/problems/missing-ranges/ 题目: Given a sorted integer array where the ran ...

  5. sql操作之修改表结构

    修改表的语法=========================增加列[add 列名]=========================①alter table 表名 add 列名 列类型 列参数[加的 ...

  6. Nginx下配置SSL安全协议

    生成证书: # cd /usr/local/nginx/conf # openssl genrsa -des3 -out server.key 1024 # openssl req -new -key ...

  7. VC6在win7环境下无法添加以及打开现有文件的解决办法

       在VC6.0中使用键盘快捷键或者是文件菜单打开现有文件以及添加文件出现编辑器停止响应,弹出内容为Microsoft(R) Developer Studio已停止工作 Windows正在检查解决该 ...

  8. php操作Mysql 以及封装常用的函数 用外连接连接3个表的案例

    <?php header("content-type;text/html;charset=utf-8"); //数据库连接define('DB_HOST','localhos ...

  9. ActiveMQ的使用笔记（基本实现原理）

    具体原理不进行深入,会用就好. 第一:当然是先安装ActiveMQ,选择操作系统位数,安装成功以后,输入网址http://ip:8161/admin/,会出现相关页面,账号密码都是admin.在这个页 ...

  10. 【转】lonekight@xmu·ACM/ICPC 回忆录

    转自:http://hi.baidu.com/ordeder/item/2a342a7fe7cb9e336dc37c89 2009年09月06日 星期日 21:55 初识ACM最早听说ACM/ICPC ...