Height:100%

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

image

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">

        body

        {

            background-color: Black;

            height: 100%;

            padding: 0px;

            margin: 0px;

        }

        html

        {

            height: 100%;

        }

        #mainDiv

        {

            min-height: 100%;

            background-color: White;

            width: 550px;

            margin-left: auto;

            margin-right: auto;

            padding: 0px;

        }

        #insideDiv

        {

            text-align: center;

        }

    </style>

</head>

<body>

    <div id="mainDiv">

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

        <div id="insideDiv">

            Hello World!

        </div>

        </form>

    </div>

</body>

</html> 

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

Advertisements

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