All geek questions in one place

100% Height and width of container div tag not working

I have the following layout for my web page. The following CSS code gives me 100% height and width in Internet Explorer 9. While the same gives me 100% width in FF and Chrome, but not at 100% height. I tried several examples, most of them have the same problem. I use the same code at http://jsfiddle.net/cwkzq/3/ here, if I see the same as FF, it gives me 100% height and 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 could point out a problem in the code.

+6
source share
1 answer

The percent height setting only affects when the parent also has the height set. Therefore, if you want to set the div to 100% height, you also need to set the shape and body to 100% height.

+11
source

Source: https://habr.com/ru/post/917438/

More articles:


All Articles