I am attempting to create a flexible div that will adjust its width and height proportionally based on the viewport size. However, in the example above, this method only seems to make the div expand horizontally without affecting the vertical height (which remains fixed). When I try to use percentage values for the height of my wrapper or main_content elements, the browser ignores them unless they are specified in pixels or ems. How can I resolve this issue? If I could set the height of my div with a percentage value, it should solve the problem, right?
<div class=".wrapper">
<div id="main_content"></div>
<div>
.wrapper{
width: 80%;
margin : 0 auto;
}
#main_content{
width : 100%;
height : 500px;
}