<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. Git: untrack a file in local repo only and keep it in the remote repo

    You could update your index: git update-index --assume-unchanged nbproject/project.properties and ma ...

  2. AjaxPost、冒泡示例

    //Ajax提交表单 $("#AssetsForm").submit(function () { $.ajax({ type: "post", url: &qu ...

  3. SignalR in a WebSite Project

    Question(http://stackoverflow.com/questions/19924678/signalr-in-a-website-project)  I have a test we ...

  4. 戴尔商务机OptiPlex5040问题

    windows安装程序无法将Windows配置为在此计算机的硬件 你讲的那个提示准确讲应该是在系统装完重启后进入硬件检测和对应驱动开始阶段,应该是突然提示出来:windows安装程序无法将window ...

  5. 浏览器网页判断手机是否安装IOS/Android客户端程序

    IOS 原理如下: 为HTML页面中的超链接点击事件增加一个setTimeout方法. 如果在iPhone上面500ms内,本机有应用程序能解析这个协议并打开程序,则这个回调方法失效: 如果本机没有应 ...

  6. RDIFramework.NET平台代码生成器V2.8发布-更新于2014-12-31（提供下载）

    RDIFramework.NET平台代码生成器V2.8发布  更新于2014-12-31 注:已经发布了新版本,请转新版本下载: RDIFramework.NET平台代码生成器V3.0版本全新发布-更 ...

  7. js验证手机号输入是否符合规则

    function isPhone(phone){ var myreg = /^(((13[0-9]{1})|15[0-9]{1}|17[0-9]{1}|185|18[0-9]{1})+\d{8})$/ ...

  8. Maven聚合与继承的实例讲解（一）

    概述 在javaweb高速发展的今天,我们软件设计人员往往会用很多种方式对软件划分模块,目的就是为了能有清晰的设计和低耦合性的,高重用性的软件.Maven有很好的依赖管理系统(Dependency M ...

  9. Leetcode: Arithmetic Slices II - Subsequence

    A sequence of numbers is called arithmetic if it consists of at least three elements and if the diff ...

  10. sdutoj 2151 Phone Number

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2151 Phone Number Time Li ...