html - 親ラップ div の 100% 高さの子 div

Question

他の同様の質問が私の特定の問題を解決できなかったので、私はここにいます。

#right div の高さを 100% にするにはどうすればよいですか? CSS ソリューションのみが必要です。ありがとう。

http://jsfiddle.net/elturko/86nX9/

HTML

<div id="wrap">
 <div id="header"></div>
 <div id="left"></div>
 <div id="right"></div>
 <div id="footer"></div>
</div>

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#wrap{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;
    background:#ddd
}
#header{
    height:104px;
    background:#d5a1b3;
}
#left{
    float:left;
    width:219px;
    background:#a2d025;
}
#right{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;
    overflow:hidden;
    background:#FFF;
    margin:0 15px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    padding:14px;
}
#footer{ 
    clear:both;
    height:15px;
    background:#ed653a;
}

Answer 1

これを css から取り出してください#right{}:

margin:0 15px;

これにより、幅が 100% になります。100% の高さに少し混乱しています。広いということですか？

Answer 2

私はあなたのhtmlを少し再構築しました。それはあなたの望む結果ですか？

jsfiddle

<div id="container">
<div id="wrap">
    <div id="header">
        header
    </div>

    <div id="body">
        <div id="left">
            left
        </div>

        <div id="right">
            right<br>
            right<br>
            right<br>
            right<br>
            right<br>
        </div>
    </div>

</div>
</div>

<div id="footer">
    <p>footer</p>
</div>

CSS

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#container {
    height: 100%;
    height: auto !important;
    min-height: 100%;
}

#wrap {
    overflow: auto;
    padding-bottom: 16px;
}

#header {
    height: 104px;
    background:#d5a1b3;
    border-bottom: 1px solid #000;
}

#body {
    overflow: hidden;
    height: 100%;
}

#right {
    margin: 0px 0px 0px 220px;
    background:#FFF;
}

#left {
    width: 219px;
    float: left;
    background:#a2d025;
}

#footer {
    background:#ed653a;
    border-top: 1px solid #000;
    position: relative;
    height: 20px;
    margin-top: -21px;
    clear: both;
}
#footer p {
    margin: 0px;
}