4 
<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要素は意図したとおりに機能せず、テーブル要素自体の高さを取得して、そのテーブル内の他のすべてのtdの高さを無視します。

たとえば、OperaまたはIEで開きます。

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

4

2 に答える 2

8

テーブルを忘れてください:)。絶対測位を使用できます。

#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デモ

于 2012-05-05T15:57:36.813 に答える
0

height:100%;親と同じ身長が欲しいという意味です。親#wrには子供が多いので、#con_bottom合いません。あなたの現在のケースでは、85％の高さが適切なようです#con_bottom。余白と境界線（および親のパディング）は、使用可能なスペースにカウントされることに注意してください。

于 2012-05-05T15:59:39.617 に答える