Setting - ASP:Table Height to 100%
-
I am trying to create a table for layout. Simple header, content and footer sections (rows). I want the header to sit flush against the top of the page and the footer to sit at the bottom of the page. The content section should fill the available space. I thought setting the height of the table to 100% would accomplish this but there appears to be problems. Is there a neat solution to this problem? What is the workaround? Code shown below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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> </head> <body> <asp:Table Width="100%" Height="100%" BackColor="Azure" runat="server"> <asp:TableRow> <asp:TableCell Height="50px">top</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell BackColor="Beige"> <form id="form1" runat="server"> <div> mid </div> </form> </asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Height="50px" BackColor="BlanchedAlmond">bottom</asp:TableCell> </asp:TableRow> </asp:Table> </body> </html> -
I am trying to create a table for layout. Simple header, content and footer sections (rows). I want the header to sit flush against the top of the page and the footer to sit at the bottom of the page. The content section should fill the available space. I thought setting the height of the table to 100% would accomplish this but there appears to be problems. Is there a neat solution to this problem? What is the workaround? Code shown below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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> </head> <body> <asp:Table Width="100%" Height="100%" BackColor="Azure" runat="server"> <asp:TableRow> <asp:TableCell Height="50px">top</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell BackColor="Beige"> <form id="form1" runat="server"> <div> mid </div> </form> </asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell Height="50px" BackColor="BlanchedAlmond">bottom</asp:TableCell> </asp:TableRow> </asp:Table> </body> </html>Try to use with CSS. Because there is some issues in using Width of table directly.
Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net)