关闭

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

2316人阅读 评论(0) 收藏 举报

 

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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:51874次
    • 积分:626
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:12篇
    • 译文:1篇
    • 评论:7条