Sometimes the easiest things to do eat up most of my time. Like this one — This is what i want to accomplish:



My content in the middle with a border on both ends, extending to the bottom. The vertical scrollbar will only appear when you go beyond. You’d think that you only need a table with height:100%; But it’s not as easy as the width where you can just say width:100%;

100% means you want to eat up all of the *available* space. That means if the container holding your table, or whatever has a height of, say, 200px, then your table can only extend to as far as 100px. So what we need to do is declare the holding container to 100% as well. And that’s just what i did to the HTML tag.

I’m a fan of DIV, so i just used DIV.

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”HeightOneHundred.aspx.cs”

    Inherits=”JohnWebby.HeightOneHundred” %>


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””&gt;

<html xmlns=””&gt;

<head runat=”server”>

    <title>Height One Hundred Percent</title>

    <style type=”text/css”>



            background-color: Black;

            height: 100%;

            padding: 0px;

            margin: 0px;




            height: 100%;




            min-height: 100%;

            background-color: White;

            width: 550px;

            margin-left: auto;

            margin-right: auto;

            padding: 0px;




            text-align: center;





    <div id=”mainDiv”>

        <form id=”MainForm” runat=”server”>

        <div id=”insideDiv”>

            Hello World!






It’s also important to take note that if you’re dealing with a FORM, to put it inside of the mainDiv