6
다음 웹 페이지 레이아웃이 있습니다. 다음 CSS 코드는 Internet Explorer 9에서 100 % Height & 너비를 제공합니다. 동일한 것이 FF & 크롬에서는 100 % 너비이지만 높이는 100 %가 아닙니다. 나는 그들 중 대부분이 같은 문제를 가지고 몇 가지 예제를 시도했다. 나는 동일한 내용의 코드를 http://jsfiddle.net/cwkzq/3/에 사용했습니다. FF로 보았을 때 100 % 높이와 너비를 제공합니다.100 % 컨테이너 div 태그의 높이 및 너비가 작동하지 않습니다.
<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>
누군가 코드에서 문제를 지적 할 수 있으면 감사하겠습니다.
DOCTYPE 태그를 포함 시키면 문제의 원인이 아님을 항상 알게 될 것입니다.) – poepje