请问这种情况下有没有办法让元素高度等于父元素呢？


<!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></title>
    <style>
    #container{min-height:200px;}
    #one{float:left; height:300px; width:200px; background-color:Red;}
     #two{float:left; height:100%;width:200px; background-color:green;}
    </style>
</head>
<body>
<div id="container">
<div id="one"></div>
<div id="two">asdad</div>
</div>
</body>
</html>请问有没有办法让two元素高度等于父元素高度呢？上面的用了height:100%的没有效果
请指教！~谢谢

解决方案 »

  1.   

    用JS解决：
    <!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></title>
        <style>
        #container{min-height:200px;}
        #one{float:left; height:300px; width:200px; background-color:Red;}
         #two{float:left; width:200px; background-color:green;}
        </style>
    </head>
    <body>
    <div id="container">
    <div id="one"></div>
    <div id="two">asdad</div>
    </div>
    <script type="text/javascript">
    document.getElementById('two').style.height = document.getElementById('one').offsetHeight + 'px';
    </script>
    </body>
    </html>
      

  2.   


    <!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></title>
        <style>
        #container{min-height:300px;}
        #one{float:left; height:300px; width:200px; background-color:Red;}
         #two{float:left; height:300px;width:200px; background-color:green;}
        </style>
    </head>
    <body>
    <div id="container">
    <div id="one"></div>
    <div id="two">asdad</div>
    </div>
    </body>
    </html>
      

  3.   

    呃~我的父元素高度是由one元素撑开的哦可以不固定高度么
      

  4.   

    没看仔细，要跟父元素一样高的话，js稍微修改下：
    <script type="text/javascript">
    document.getElementById('two').style.height = document.getElementById('container').offsetHeight + 'px';
    </script>
      

  5.   


    <!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" />
    <title>无标题文档</title>
    <style>
    #container{position:relative; width:200px;padding-right:200px;background-color:green;  float:left;}
    #one{min-height:300px; _height:300px;width:200px; background-color:Red;}
    #two{height:100%;width:200px;  position:absolute; right:0; top:0;}</style>
    </head><body>
    <div id="container">
    <div id="one">dd</div>
    <div id="two">asdad</div>
    </div>
    </body>
    </html>
    如果是要指定背景延伸.可以直接在 container 里设置背景.如果还有其它要求.我想的出来的也就是js了.
    主要是IE6的兼容问题.标准浏览器要2个一样高是很容易实现的.
      

  6.   

    有谁知道如何禁止拉动浏览器大小?!吗
    http://topic.csdn.net/u/20110418/22/7e5b17a5-e255-417b-8196-3f095064aaf8.html?21601
      

  7.   

    <!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></title>
        <style>
        #container{min-height:200px;border:solid 1px blue;overflow:hidden}
        #one{float:left; height:300px; width:200px; background-color:Red;}
         #two{float:left; width:200px; background-color:green;padding-bottom:100000px;margin-bottom:-100000px}
        </style>
    </head>
    <body>
    <div id="container">
    <div id="one"></div>
    <div id="two">asdad</div>
    </div>
    </body>
    </html>
      

  8.   


    <!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" />
    <title>三栏等高(wwww.hemin.cn)</title>
    <style type="text/css">
    *{ margin:0; padding:0; font-size:18px; font-family:"新宋体";}
    body {min-width: 850px;width:expression((documentElement.clientWidth < 850) ? "850px" : "auto" ); }
    .Top{background:#999; height:100px;}
    .Middle,.Left,.Right{ float:left;padding-bottom: 32767px;margin-bottom:-32767px;}
    .Content{ overflow:hidden;padding:0 250px 0 300px; zoom:1;position:relative;}
    .Middle{background:#090;width:100%;}
    .Left{background:#333;width:300px;margin-left:-100%; position:relative; right:300px;_left:250px;}
    .Right{background:#666;width:250px;margin-right:-100%;}
    </style>
    </head>
    <body>
    <div class="Top">顶部</div>
    <div class="Content">
    <div class="Middle">中间</div>
    <div class="Left">左边</div>
    <div class="Right">右边<br /><br /><br /></div>
    </div>
    </body>
    </html>