100% Height Div On Asp .Net Page
Asp .Net pages need a form tag to have the cool Asp .Net controls working. What if you wanna have div with 100% height? Lets try this code:
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Test.aspx.cs” Inherits=”Test” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Untitled Page</title>
<style media=”screen” type=”text/css”>
html,body {margin:0;padding:0;height:100%;}
#container {width:790px;text-align:left;margin:0 auto 0 auto;padding:0;border:0;min-height:100%;position:relative;background:#ccc;}
#header {background:#ff0;padding:10px;}
#body {padding:10px;padding-bottom:60px;}
#footer {position:absolute;bottom:0;width:100%;height:60px;background:#6cf;}
</style>
<!–[if lt IE 7]>
<style media=”screen” type=”text/css”>
#container {
height:100%;
}
</style>
<![endif]–>
</head>
<body>
<form id=”form1″ runat=”server”>
<div id=”container”>
aaa
</div>
</form>
</body>
</html>
Do you think you would get a 100% height for <div id=”container”>? Not relly. Different browsers act differently on this. IE seem to work fine without any problem However Mozilla does not work.
Why?
Although body, html, and the Div with id=”container” has the 100% height opened up, form element does not have a 100% height.
Solution
Simply open the 100% height for the form element that should get you 100% height. Here is the revised code:
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Test.aspx.cs” Inherits=”Test” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Untitled Page</title>
<style media=”screen” type=”text/css”>
html,body {margin:0;padding:0;height:100%;}
#container {width:790px;text-align:left;margin:0 auto 0 auto;padding:0;border:0;min-height:100%;position:relative;background:#ccc;}
#header {background:#ff0;padding:10px;}
#body {padding:10px;padding-bottom:60px;}
#footer {position:absolute;bottom:0;width:100%;height:60px;background:#6cf;}
</style>
<!–[if lt IE 7]>
<style media=”screen” type=”text/css”>
#container {
height:100%;
}
</style>
<![endif]–>
</head>
<body>
<form id=”form1″ style=”height:100%;” runat=”server”>
<div id=”container”>
aaa
</div>
</form>
</body>
</html>
For the demonstration, I placed an inline style for the form tag:
<form id=”form1″ style=”height:100%;” runat=”server”>
You can use a css class if you like.
(2 votes, average: 3.00 out of 5)
Loading ...
What?! Your form tag is exactly the same in both code samples
@Ed Ferron
Thanks for pointing that out. Mistake in copying the code.
Hi,
Thank you for this post. This is the solution for all the trouble.
Greetz,
Wim
The Netherlands
Leave your response!
Categories
Most Commented
Recent Comments
Blogroll
Most Viewed