"Stretching" the background container to hold all of it contents_问答_开发者

I have the following problem.

I have done the following:

In my css file, I have declared both for body and for a div tag enclosed in body, height: 100%; (the div tag is technically a <asp:panel> tag, but get's rendered as a div tag.

This works fine, and the div container scale to fill the browser from top to bottom, and does not give any scrollbar, just as it is intended to.

However, on one of the sub-pages, from the Page_Load method I add some controls to the panel/div, and those controls are enough to fill more than the height of the screen, and therefore a vertical scrollbar is given as it should. However, when I start scrolling, the part of the content that was originally below the height of the screen do not get any background. So the background is s开发者_运维百科till constrained to the max height of the screen even if it's contents are exceeding that height.

I assume that the height:100% causes the problem here, but I have not found a replacement that works as it should in this case. I tried height:auto; causing the background to be removed in it's entirety.

The question might be basic, but I do not do much web programming these days, so please bear with me :)

EDIT

As additional information, I should mention that the content is actually added inside a div inside the original div if that matters.

EDIT 2

Some of the relevant html and css:

<html>
<title></title>
<body>
  <form>
    <div class="MainContainer">
      <h1>My header</h1>
      <div class="MainMenu">
        ...
      </div>
      <div id="PageContents_BlogPostPanel" class="ContentContainer">
        ...(These are the contents that extend beyond the bottom of the page)!!
      </div>
    </div>
  </form>
</body>
</html>

And here is the extracted css parts:

*
{
    margin: 0;
    padding: 0;
}

html, body
{
    background-color: #6CC66C;
height: 100%;
} 

form
{
    background: #6CC66C url(  'images/ShadowBackground.jpg' ) repeat-y top center;
    height: 100%;
}

body h1
{
    display:none;
}

.DivHeader
{
    font-family: Arial, Sans-Serif;
    font-size: 22px;
    color: #D04444;
    padding-top:20px;
    padding-bottom:10px;
}

p
{
    font-family: Arial, Sans-Serif;
    font-size: 16px;
}

a
{
    font-family: Arial, Sans-Serif;
    font-size: 16px;
    text-decoration: none;
}   

.MainContainer
{
    background: #6CC66C url( 'images/MainBackground.jpg' ) no-repeat top center;
    width: 1040px;
    height: 100%;
    margin: auto;
    background-color: #F7F7F7;
}

div.MainMenu
{
    position:relative;
    float: right;
    margin-right: 38px;
    margin-top: 103px;
    width: 495px;
}

.MainMenu a:link img, a:visited img { border: 0px; }

.ContentContainer
{
    float: left;
    margin-top:90px;
    margin-left:80px;
    width:550px;
}

I have a solution for this and it's rather simple. :)

.MainContainer {
    ...
    display: table;
}

(Remove the height: 100% from elsewhere too, it's redundant.)

Some spec info on that: http://www.w3.org/TR/CSS2/tables.html also here: w3schools.com/css/pr_class_display.asp (Apparently I can only post two links a new user right now)

Regarding the use of Height: 100%, doing that will only make the elements height equal to the height of it's parent element - in this case the document window, not the contents of it. Some spec info here: http://www.w3.org/TR/CSS21/syndata.html#percentage-units

Regards.

Try overflow tag in Css file

   overflow:scroll;
   overflow:auto;

I think what you need is something like this:

Style should be

    *
{
    margin: 0;
    padding: 0;
}

body
{
    font-family: Arial, Sans-Serif;
    font-size: 16px;
} 

form
{
    background: #6CC66C url(  'images/ShadowBackground.jpg' ) repeat-y top center;
}

body h1
{
    display:none;
}

.DivHeader
{
    font-family: Arial, Sans-Serif;
    font-size: 22px;
    color: #D04444;
    padding-top:20px;
    padding-bottom:10px;
}

a
{
    text-decoration: none;
}   

.MainContainer
{
    background: #F7F7F7 url( 'images/MainBackground.jpg' ) no-repeat top center;
    width: 1040px;
    margin: 0 auto;
    min-height: 100%;
}

div.MainMenu
{
    float: right;
    margin-right: 38px;
    padding-top: 103px;
    width: 495px;
}

.MainMenu a:link img, a:visited img { border: 0px; }

.ContentContainer
{
    float: left;
    margin-top:90px;
    margin-left:80px;
    width:550px;
}

And you need an element to clear the floated divs in the MainContainer

<div class="MainContainer">
  <h1>My header</h1>
  <div class="MainMenu">
    ...
  </div>
  <div id="PageContents_BlogPostPanel" class="ContentContainer">
    ...(These are the contents that extend beyond the bottom of the page)!!
  </div>
  <div style="clear:both"></div>
</div>