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.
Leave your response!
Categories
Most Commented
Blogroll
Most Viewed