Home/ Questions/Q 4024388
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T10:42:57+00:00

I have the following problem. I have done the following: In my css file,

  • 0

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 still 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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0