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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s