I have a following layout of my web page. Following CSS code gives me 100% Height & Width in Internet Explorer 9. While same does gives me 100% width in FF & Chrome but not 100% height. I tried several example most of them have the same issue. I have use same code on http://jsfiddle.net/cwkzq/3/ here if i view same it FF it gives me 100% height as well as width.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
border: 1;
background-color:Aqua;
}
.Container {
width: 100%;
height: 100%;
border: solid 1px red;
margin: 0 auto;
padding: 0 1em;
font: 12px/1.5 Verdana;
background-color:red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<!-- Container -->
<div class="Container">
<!-- TopMenu Bar -->
<div class="colorBar">
asd
</div>
<!-- TopMenu Bar -->
<!-- Middle Part -->
<div class="MiddleWrapper">
<!-- Left Title -->
<div class="Title">
</div>
<!-- Left Title -->
<!-- Large Image -->
<div class="ImageLeftWrapper">
</div>
<!-- Large Image -->
<!-- Logo Wrapper -->
<div class="LogoWrapper">
</div>
<!-- Logo Wrapper -->
<!-- Page Text Area -->
<div class="PageText">
</div>
<!-- Page Text Area -->
<!-- Search Bar -->
<div class="SearchBar">
</div>
<!-- Search Bar -->
<!-- Banner Images -->
<div class="BannerImageWrapper">
</div>
<!-- Banner Images -->
</div>
<!-- Middle Part -->
<!-- Menu Wrapper -->
<div class="MenuWrapper">
</div>
<!-- Menu Wrapper -->
<!-- Footer Section -->
<div class="FooterWrapper">
</div>
<!-- Footer Section -->
</div>
<!-- Container -->
</form>
</body>
</html>
I would appreciate if someone can point to the problem in the code.
Setting the height to a percentage only has effect when the parent element also has a height set. So if you want to set the div to 100% height, you also have to set the form and the body to 100% height.