两个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>

相关文章推荐

由于设计页面需要,要把两个并排显示的 div 实现一样高的效果, n 行 n 列布局,每列高度(事先并不能确定哪列的高度)相同,每个设计师追求的目标。方法有以下几种: 1 JS 实现(判断 2 个 d

由于设计页面需要,要把两个并排显示的 div 实现一样高的效果, n 行 n 列布局,每列高度(事先并不能确定哪列的高度)相同,每个设计师追求的目标。方法有以下几种: 1 JS 实现(判断 2 个 d...

交换两个div的位置

  • 2012年04月24日 15:01
  • 637B
  • 下载

如何让两个div处于一行

我们知道 div是块级元素,是独占一行的.一般情况下,两个相邻的div是不会处于一行的 例如: 让两个div处于同一行 ...

div.onblur的两个解决方法、跳出详细框的控制

分类: javascript 2011-06-10 09:33 2245人阅读 评论(0) 收藏 举报 divhtmlbuttonfunctionfirefoxie  1.d...

jquery让两个div高度自动适应 不用再看别的方法了 这个最简单

这个问题今天可是整了我一上午,原本是打算用js实现,结果兼容性很难得处理.最后选择了jquery,方法如下(这里是我推荐的方法),使用简单,兼容性好.只需要在页面中设置一句代码就搞定,这么好的东西所以...
  • zyp_tfy
  • zyp_tfy
  • 2011年06月18日 20:34
  • 9825

【2015-2016 ACM-ICPC Pacific Northwest Regional Contest (Div 1)D】【水题】Triangle 两个三角形是否可以恰好拼成矩形

#include #include #include #include #include #include #include #include #include #include #include #...

在JSP中如何实现两个DIV块的跑马灯滚动

js无缝滚动制作js文字无缝滚动和js图片无缝滚动 *{margin:0;padding:0;list-style-type:none;font-size:12p...

CodeForces 602A Two Bases(简单题,比较两个不同进制数的大小)——Codeforces Beta Round #333 (Div. 2)

CodeForces 602A Two Bases(简单题,比较两个不同进制数的大小)——Codeforces Beta Round #333 (Div. 2)...

HTML在两个div标签中间画一条竖线

小弟我是新手。近日在画一个界面的时候,遇到一个需求:在界面当中画一条竖线,且这条竖线在高度上需要自动占满整个父div(即这条竖线的高度和两个div中较高的一个等高)。   往常我们画一条横线直接用标...
  • xixi_1a
  • xixi_1a
  • 2016年10月10日 14:46
  • 9800

两个并排的div之间有间隔问题

问题描述1: 两个并排的div之间有空隔 *{ margin:0; padding:0; ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:两个div,高总都保持一样高(总结)
举报原因:
原因补充:

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