100％的高度容器div标签的宽度无效 [英] 100% Height & Width of container div tag not working
问题描述
我的网页布局如下.以下CSS代码为我提供100％的高度&Internet Explorer 9中的宽度.虽然相同，但在FF& amp;中显示了100％的宽度.镀铬，但不是100％的高度.我尝试了几个示例，其中大多数都存在相同的问题.我在 http://jsfiddle.net/cwkzq/3/上使用了相同的代码我的身高和宽度都是100％.
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.
推荐答案
仅当父元素也设置了高度时，才将高度设置为百分比才有效.因此，如果要将div设置为100％的高度，则还必须将窗体和主体设置为100％的高度.
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.
这篇关于100％的高度容器div标签的宽度无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
