Home/ Questions/Q 7128203
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T11:06:50+00:00

I’m having a HUGE problem, geting my masterpage layout to stretch to 100% browser

  • 0

I’m having a HUGE problem, geting my masterpage layout to stretch to 100% browser window height. There is no problem for width. I tried many different solutions, but none worked.

This is what I have so far. I managed to expand html and body to height:100%, but div#container is giving me problems…it wont expand to height:100%. For testing purposes I put borders arround html, body and container, to see which one isn’t working. Any help appritiated. I’m designing my web app in VS2010 and using Chrome (also tested in IE and Mozilla with no success).

html:

<!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></title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <div id="container">
            <div id="headercontent">
                HEADER
            </div>
            <div id="leftcontent">
                <p>LEFT CONTENT</p>
                <p>MENU</p>
                <p>MENU</p>
                <p>MENU</p>
            </div>
            <div id="rightcontent">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            <div id="footercontent">
                FOOTER
            </div>
        </div>
    </form>
</body>
</html>

And my stylesheet.css

body{
    font-family: "Lucida Grande" , "Lucida Sans Unicode" , Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    background: yellow;
}

html{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 2px solid red;
}

body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 2px solid blue;
}

#container{
    width: 100%;
    height: 100%;
    margin: 0px;
    border: 2px solid black;
    line-height:150%;
}

#headercontent{
    height: 70px;
    padding: 0.5em;
    color: white;
    background-color: gray;
   clear: left;
}

#leftcontent{
    float: left;
    width: 160px;
   margin: 0;
    padding: 1em;
    border-right: 1px solid gray;
}

#rightcontent{
    margin-left: 190px;
    border-left: 1px solid gray;
    padding: 1em;
}

#footercontent{
    padding: 0.5em;
    color: white;
    background-color: gray;
    clear: left;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your body element IS 100% height as you set it but you’ve not set the contents to anything to position anywhere so they follow the normal flow, like a stack of boxes, as they should. You also don’t have enough content to fill the screen. If you want the footer to stick to the bottom, search here on SO or Google for “sticky footer”.

    If you want some of the content to stretch further, you’ll have to add some height to those.

    • 0