100% height child div in parent wrap div - html

Question

Im here because other similar questions couldn't help my particular problem.
How can #right div height making 100% ?
Only css solution needing. Thanks.
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

Here's 2 Pure CSS solution
Without fixing any height (header/footer) or width (left column).
I actually prefer the second solution. (even tho he has less browser support)
1 - using CSS tricks
this is a totally responsive design and work well with all browsers (IE10, FF, Chrome, Safari, Opera, mobile browsers)
Working Fiddle
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.LeftMenu
{
height: 100%;
float: left;
}
.Content
{
overflow: auto;
height: 100%;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
text-align: center;
}
.Header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}
2 - using Flex
This layout can also be achieved using flex, but the current browser support is pure.
Here's a Working Fiddle only FF,Chrome,IE10.
HTML: (simpler)
<header>
</header>
<section class="Middle">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</section>
<footer>
</footer>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
text-align: center;
}
body
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.Middle
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.Content
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 0 0;
overflow: auto;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
footer
{
background-color: #b5a8b7;
}

Answer 2

Take this out of css for #right{} :
margin:0 15px;
This will make it wide 100%. I'm a little confused on the 100% height. Did you meant wide?

Answer 3

Important will over-ride other CSS attributes and auto will make the div as large as it needs to be to fit the contents.
height: auto !important;
height: 100%;

Answer 4

Try this:
#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;
top: 0px;
bottom: 0px;
}
Add top: 0px; bottom: 0px; to your #right css

Answer 5

I restructured your html a bit. Is that your desired outcome?
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;
}