CSS：それは

Question

<div id="wr"> 
    <div id="con_top"></div> 
    <div id="con_bottom"></div> 
</div>​ 

#wr { 
    height:400px; 
    width:80%; 
    margin:50px auto; 
    border:1px solid black; 
} 
    #con_top { 
     height:40px; 
     margin:5px; 
     border:1px solid red;    
    } 
    #con_bottom { 
     height:100%; 
     border:1px solid blue; 
     margin:5px;  
    }​ 

http://jsfiddle.net/nMbWw/

方法、青い正方形を作り、黒、親コンテナに合わせてオーバーフローすることなく、親内のすべての可能な高さを取りますか？ JavaScriptなしで可能ですか？

テーブル要素では、はるかに簡単ですが、OperaとIEでは表が盗聴されています。高さ100％のtd要素は、テーブル要素自体の高さを、そのテーブル内の他のすべての高さを無視して意図したとおりには動作しません。例えば

は、オペラやIEで開い：

http://jsfiddle.net/UTMRn/3/

Answer 1

テーブルを忘れて:)。

#wr { 
    height:400px; 
    width:80%; 
    margin:50px auto; 
    border:1px solid black; 
    position: relative; /* added to keep the absolute element inside */ 
} 

#con_top { 
    height:40px; 
    margin:5px; 
    border:1px solid red;    
} 

#con_bottom { 
    border:1px solid blue; 
    margin:5px;  
    position: absolute; /* make it absolute */ 
    top: 45px; /* the height of the other element + its margin */ 
    bottom: 0; /* stick to the bottom */ 
    left: 0; /* stick to the left */ 
    right: 0; /* stick to the right */ 
}​ 

jsFiddle Demo

Answer 2

height:100%;が、私は私の親と同じ高さにしたいこと：あなたは絶対位置を使用することができます。親の#wrには子が多く、#con_bottomは適合しません。あなたの現在のケースでは、85％の高さは#con_bottomの右にあるようです。マージンとボーダー（および親のパディング）は、使用可能なスペースに含まれることに注意してください。