100% Height & Width of container div tag not working
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.
Learning
I have been using stackoverflow for few months & it is a blessing for learners and people who works as individual developer/designers in companies and many time get stuck as they don't have subject experts around. This is where stackoverflow comes to rescue. I appreciate all those who help others by replying to their question and most of the time with correct answers.
Updated on June 06, 2022Comments
-
Learning almost 2 years
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.