两个div,高总都保持一样高(总结)

转载 2007年09月17日 14:00:00

 

1

<html>
<head>
<title> 测试 </title>
</head>
<body>
<div style="width:100%; height:100%">
<div id="content" style="width:49%;border:1px #CCCCCC solid; height:100%; float:left; margin-left:1px">
文章
<br><br>
<input type="button" value="click" onclick="window.content.insertAdjacentHTML('afterBegin','文章<br><br><br><br>')">
</div>
<div style="width:49%;border:1px #CCCCCC solid; height:100%; float:left; margin-left:1px">广告</div>
</div>
</body>
</html>

2

 

<style type="text/css">...
#b,#c
{...}{
    width
:49%;border:1px solid #000;float:left;clear:right
}

</style>
<div id="aa">
   
<div id="b">这个地方是放文章的,字可能有时多这个地方是放文章的,字可能有时多这个地方是放文章的,字可能有时多这个地方是放文章的,字可能有时多这个地方是放文章的,字可能有时多字可能有时多这个地方是放文章的,字可能有时多这个地方是放文章的,字可能有时多字可能有时多这个地方是放文章的,字可能有时多这个地方是放文章的,字可能有时多字可能有时多这个地方是放文章的,字可能有时多这个地方是放文章的,字可能有时多</div>
   
<div id="c">广告之类的</div>
</div>
<script type="text/javascript">...
window.onload
=window.onresize=function ()...{
document.getElementById(
"c").style.height=document.getElementById("b").offsetHeight+"px";
}

</script>

 

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>footerStick - Footer sticks to bottom of page</title>
<style type="text/css" title="defaultStyle">...
/**//*<![CDATA[*/
<!--
{...}{
  margin
: 0;
  padding
: 0;
}


html, body 
{...}{
  height
: 100%; /**//* Required */
}


body 
{...}{
  color
: #333;
  font
: 11px Verdana, sans-serif;
  text-align
: center;
}


h1 
{...}{
  font
: bold 12px Verdana, sans-serif;
}


h2 
{...}{
  padding
: 1em 0 .2em 0;
  font
: normal 18px/1.5em Georgia, serif;
}


{...}{
  margin
: 2em 0;
  line-height
: 1.5em;
}


{...}{
  color
: #666;
  font-weight
: bold;
  text-decoration
: none;
}


a:hover 
{...}{
  color
: #999;
  text-decoration
: underline overline;
}


#container-page 
{...}{
  margin
: 0 auto;
  width
: 600px;
  background
: #DDD;
  text-align
: left;
  position
: relative;
  min-height
: 100%; /**//* For Modern Browsers */
  height
: auto !important; /**//* For Modern Browsers */
  height
: 100%; /**//* For IE */
}


#container-head 
{...}{
  background
: #999;
}


#head 
{...}{
  padding
: 1em;
}


#container-content 
{...}{
  padding
: 0 2em 40px 2em;
}


#container-content:after 
{...}{
  clear
: both;
  display
: block;
  font
: 1px/0px serif;
  content
: ".";
  height
: 0;
  visibility
: hidden;
}


#content-pri 
{...}{
  width
: 80%;
  float
: right;
}


#content-sec 
{...}{
  padding
: 1em 0;
  width
: 20%;
  float
: left;
}


#content-sec ul,#content-sec ul li 
{...}{
  list-style
: none none;
}


#container-foot 
{...}{
  width
: 100%;
  background
: #CCC;
  position
: absolute;
  bottom
: 0 !important;
  bottom
: -1px; /**//* For Certain IE widths */
  height
: 40px;
}


#foot 
{...}{
  padding
: 0 1em;
  line-height
: 40px;
}

-->
/**//*]]>*/
</style>
</head>
<body>
<div id="container-page">
  
<div id="container-head">
    
<div id="head"><h1>Head</h1></div>
  
</div>
  
<div id="container-content">
    
<div id="content-pri">
      
<h2>Resize the window to see the footer move</h2>
      
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In augue. Sed vitae urna feugiat ante faucibus scelerisque. Maecenas non risus vitae velit auctor tincidunt. Ut facilisis elit non metus. Quisque ac dolor. Morbi eget erat in eros rhoncus imperdiet. Aenean egestas lectus ac sapien. Pellentesque non metus ac justo luctus feugiat. Nam elit elit, sagittis vel, eleifend quis, imperdiet non, lorem. In hac habitasse platea dictumst. Suspendisse convallis, dui vitae auctor elementum, eros orci porta nisl, in ullamcorper leo wisi eget mi. Sed eget sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet diam at elit lacinia convallis. Nullam massa ligula, posuere sit amet, gravida a, placerat ac, justo. Cras vulputate. Aliquam sed enim non justo sollicitudin tempor.</p>
      
<p>Donec consequat cursus elit. Quisque posuere, massa blandit tincidunt aliquam, ipsum lectus egestas tortor, a iaculis ipsum urna et quam. Donec ultrices varius mi. Sed non magna. Sed ligula. Etiam magna quam, viverra at, fringilla nec, nonummy ut, wisi. Aenean volutpat, tellus at faucibus bibendum, sapien massa mattis lorem, id volutpat quam odio vitae mauris. Donec laoreet lacinia urna. Integer adipiscing dui nec dui. Curabitur non nulla. Vestibulum faucibus, quam ut iaculis volutpat, nibh risus tempus risus, quis lobortis nulla erat nec ipsum. Pellentesque ac est in libero semper hendrerit. Maecenas accumsan est quis diam varius laoreet. Ut velit risus, sollicitudin in, tempor ut, gravida non, sem. Quisque at quam vel orci volutpat luctus.</p>
    
</div>
    
<div id="content-sec">
      
<ul>
        
<li><href="/">Home</a></li>
        
<li><href="/">Products</a></li>
        
<li><href="/">Services</a></li>
        
<li><href="/">Careers</a></li>
        
<li><href="/">Conact</a></li>
      
</ul>
    
</div>
  
</div>
  
<div id="container-foot">
    
<div id="foot">Foot</div>
  
</div>
</div>
</body>
</html>

 

4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<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:#FF0000;">Left</div> 
<div id="sidebar_mid" style="float:left;width:100px; background:#666;"> 
Middle
<br /> 
Middle
<br /> 
Middle
<br /> 
Middle
<br /> 
Middle
<br /> 
Middle
<br /> 
Middle
<br /> 
Middle
<br /> 
Middle
<br /> 

</div> 
<div id="sidebar_right" style="float:right;width:100px; background:#0000FF;">Right</div> 
</div> 
</body> 
</html>

 

5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> 测试 </title>
</head>
<script language="JScript">...
<!--
    
function addCon(abc) ...{
        
if ( abc == 2...{
            window.content.insertAdjacentHTML(
'afterBegin','文章<br>');
        }
 
        
var con_height = window.content.clientHeight;
        window.ad.style.height 
= con_height;
    }

-->
</script>
<body onload="addCon(1)">
<div style="width:100%; height:100%">
<div id="content" style="width:49%;border:1px #CCCCCC solid; height:100%; float:left; margin-left:1px">
文章
<br>
<input type="button" value="click" onclick="addCon(2)">
</div>
<div id="ad" style="width:49%;border:1px #CCCCCC solid; height:100%; float:left; margin-left:1px">广告</div>
</div>
</body>
</html>

JS中控制两个div的高度保持一致

$(function(){ if($("#left").height() > $("#right").height()){ $("#right").css("height",$("#left").h...
  • xujiangdong1992
  • xujiangdong1992
  • 2017年04月01日 17:41
  • 826

DIV与屏幕同高的方法

河浪的web设计小技巧
  • u013350495
  • u013350495
  • 2016年12月12日 13:36
  • 245

前端实例知识点-多个并行的DIV实现高度一致

博客前言: 做为一个程序员,在复杂的工作环境中总要学着去承担更多的责任,和接触更广泛的知识。然而在接触新区域时,一个小白总是为自己能钻研出一点点东西感到十分兴奋,为了让这份成就感附属的知识点留给自己...
  • ccsawcc
  • ccsawcc
  • 2018年01月11日 15:38
  • 24

两个div在同一行显示 调整两个div间的高度 栅格系统col-sm md lg

尤其在写一些新增修改页面的时候,不好好排版的话,看起来很不美观。 博主原本的代码 div class="form-group"> for="code">编号 "text" ...
  • qq_39773969
  • qq_39773969
  • 2018年01月17日 11:59
  • 53

让多个 DIV 高度相同

html部分: div> ul> li class="column"> p>huhuasdauahsuahup> p>hu...
  • u012011360
  • u012011360
  • 2016年04月18日 14:42
  • 701

JS 固定两个DIV一样高

p { color:red; } $(document).ready(function () { var mright = $(".main_right").height(...
  • xun_2008
  • xun_2008
  • 2013年01月22日 20:56
  • 581

HTML 中,如何让两个并列的标签高度一致(因为其中一个的高度不确定)

面临的问题是这样的: 一开始想的解决方法就上上面图片中的文字的方法,就是父元素适应子元素2的高度,然后子元素1的高度再去适应父元素的高度,后来经过很多调试,还是得不到效果。 最...
  • greetfish
  • greetfish
  • 2015年05月19日 11:51
  • 1721

解决div高度一窗口一样的问题

众所周知,css中width:100%;会使div的宽度与窗口一样大小。然而在div的css中height:100%并不会。 这时只需要把body与html的高度也设置成100%就行了。 html,...
  • weixin_38544803
  • weixin_38544803
  • 2017年06月02日 16:10
  • 529

让并排的两个Div自适应高度(一样高)

需求: 解决办法: 由于设计页面需要,要把两个并排显示的div实现一样高的效果,n行n列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标。方法有以下几种:1、JS实现(...
  • liuzp111
  • liuzp111
  • 2015年09月30日 11:57
  • 2875

GridView Item 大小可能不一样,如何保持同一行的Item 高度大小相同,且GridView高度自适应!

GridView Item 大小可能不一样,如何保持同一行的Item 高度大小相同,且GridView高度自适应! GridView同一行item高度设定相同,自适应!...
  • tenggangren
  • tenggangren
  • 2013年08月06日 11:06
  • 6947
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:两个div,高总都保持一样高(总结)
举报原因:
原因补充:

(最多只允许输入30个字)