我的网页布局如下.以下CSS代码给了我100％的高度& Internet Explorer 9中的宽度虽然相同,但在FF和& ;;镀铬但不是100％高度.我尝试了几个例子,其中大多数都有同样的问题.我在
http://jsfiddle.net/cwkzq/3/上使用相同的代码,如果我查看相同的FF它给我100％的高度和宽度.
@H_502_2@<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>
如果有人可以指出代码中的问题,我将不胜感激.
解决方法
仅当父元素也设置了高度时,将高度设置为百分比才有效.因此,如果要将div设置为100％高度,还必须将窗体和主体设置为100％高度.
