My web page layout has a CSS issue where I am unable to achieve 100% height in Firefox and Chrome, unlike in Internet Explorer 9. I have tried multiple examples but encountered the same problem. You can view the code on http://jsfiddle.net/cwkzq/3/ where it displays correctly with 100% height and width in Firefox.
<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>
<!-- Middle Part -->
<div class="MiddleWrapper">
<!-- Left Title -->
<div class="Title">
</div>
<!-- Large Image -->
<div class="ImageLeftWrapper">
</div>
<!-- Logo Wrapper -->
<div class="LogoWrapper">
</div>
<!-- Page Text Area -->
<div class="PageText">
</div>
<!-- Search Bar -->
<div class="SearchBar">
</div>
<!-- Banner Images -->
<div class="BannerImageWrapper">
</div>
</div>
<!-- Menu Wrapper -->
<div class="MenuWrapper">
</div>
<!-- Footer Section -->
<div class="FooterWrapper">
</div>
</div>
</form>
</body>
</html>
I am looking for assistance in identifying the issue in the code causing this problem.