Home/ Questions/Q 8500985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T01:05:18+00:00

If got a very basic layout, with a header, content container and a footer.

  • 0

If got a very basic layout, with a header, content container and a footer.
What i need done, is to make my content container size up, so that the whole layout will fit on the screen. (unless the text in the content container extends this of course).

I’ve tried assigning a height 100% value to my body, and from there assigning my content containers height to 100% aswell, but that results in making my content container size up to the height of the full screen.

Before that i had the height on the content container set to auto, which of course resulted in the page not being long enough, if a visitor with a bigger screen size than the layout, viewed the page.

Here is a part of my code:

HTML:

<body>
    <div class="background"></div>
        <div class="page">
            <div class="header">
            </div>

            <div class="content">
            </div>

            <div class="footer">
            </div>
        </div>
</body>

CSS:

html, body {
    height:100%; 
    margin:0; 
    padding:0;
}
.page {
    position:relative; 
    height:100%;
    z-index:1; 
}
.content {
    position:relative;
    width:850px;
    height: 100%;
    margin: 0 auto;
    background: url(images/content.png) 0 0 repeat-y;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think this what you need (the footer will be always sticked to the bottom)

    CSS

    html, body {
    margin:0;
    padding:0;
    height:100%;
}
.page {
    min-height:100%;
    position:relative;
}
.header {
    background:#00ff0f;
    padding:30px;
}
.content{
    padding:10px;
    padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
    text-align:justify; 
 }
.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:15px;   /* Height of the footer */
    background:#00ff0f;
    padding:10px 0; /*paddingtop+bottom 20*/
}

.content {
    height:100%; // IE HACK
}

    HTML

    <div class="page">
    <div class="header">Header</div>
    <div class="content">
        Some Content Here...
    </div>
    <div class="footer">Footer</div>
</div>​

    Tested in all major browsers.
    DEMO.

    ​

    • 0