Add height:100%
to html, body
and #wrapper
in css
Here's an updated fiddle : fiddle
Question
I'm creating some div elements. Then I'm trying to give the divs width and height using percentages. Nothing happens. What is the problem?
HTML:
<!--Wrapper div-->
<div id="wrapper">
<div id="inbox">
</div>
</div>
CSS:
html, body {
width:100%;
background-color:yellowgreen;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #ffffcc;
min-width: 700px;
-webkit-box-shadow: 5px 5px 5px #828282;
-moz-box-shadow: 5px 5px 5px #828282;
box-shadow: 5px 5px 5px #828282;
}
#inbox {
width:60%;
height:70%;
}
La solution
Add height:100%
to html, body
and #wrapper
in css
Here's an updated fiddle : fiddle
Autres conseils
It is working except your div has no height. Either set a min-height or add some content.
You need to specify some form of height
for each parent element of #inbox
, including html
.
html, body {
height:100%;
}
#wrapper {
min-height:70%;
}
#inbox {
height:70%;
}