CODEWITHSUNDEEP
htmlcss
aHunter
aHunter

Reputation: 3530

HTML CSS Height 100% expanding beyond the size of the page

I am having a bit of a nightmare with the CSS on a page that I am working on. I have two div tags a header and a main content the header is set to a height of 250px and the main is then set to a height of 100%. I have also set the height on the html and body to 100% as well in order to satisfy the issue with a container set to 100% in the page.

The issue is that I now have a page that exceeds the size of the browser and show a scroll and I do not want to remove the scroll bar because the page may exceed the size of the browser.

HTML CODE:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page Height 100% Issue</title>

<link href='../style/test.css' rel='stylesheet' type='text/css' />

</head>

<body>

<div class='head'>Header</div>

<div class='content'>Main Content</div>

</body>
</html>

CSS:


html {
    height:100%;0
}

body {
    height:100%;
}

div.head {
    width:100%;
    height:250px;
}

div.content {
    width:100%;
    height:100%;
}

Can anyone help me to get this all on one page set to the maximum size of the page without scroll bars, height 100%.

Upvotes: 2

Views: 14990

Answers (2)

animuson
animuson

Reputation: 54729

Unfortunately when it comes to heights, the 100% does not automatically expand to fill the remaining height of the page after the 250px high header division is created. The height is set to actually 100%, on top of the 250px. So the header division is probably appearing at the height of your window, then the header is pushing it down 250px.

By default, the body should also have a margin (8px). I don't know if they changed that for HTML4 or XHTML, but that's what it was for HTML4. Keep in mind that the height of an element does not include the margin and padding for the element, they are added together in the end.

You should be able to put them both into another division at height 100% and make it work properly, but you'll most likely find that the page still extends past the screen by 16px because of the margin on the body.

A suggestion: don't worry about a 100% page height. When your website is 'finished' there should be enough content on it where you won't need to be dealing with 100% page heights anyways. If not, then you should consider combining pages so that they do reach the bottom of the window. If you need some filler text for testing it, try Lorem Ipsum. I still have yet to run across a real scenario where someone has actually needed a 100% page height for their elements.

Upvotes: 1

Clive
Clive

Reputation: 36956

You're setting a height of 100% on div.content, which will take up 100% of it's container element (body). So the height of body overall will be 100% + 250px (the height of div.head), which is not what you want.

Adding a containing div and setting the height on that would be the best way to go, I've tested this code and it seems to work:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test Page Height 100% Issue</title>

    <style type="text/css">
    html {
        height:100%;
    }

    body {
        height:100%;
     margin:0;
    }

    div.head {
        width:100%;
        height:250px;
    }

    div.container{

        height:100%;
    }

    div.content {
        width:100%;
    }
    </style>

    </head>

    <body>
        <div class="container">
            <div class='head'>Header</div>

            <div class='content'>Main Content</div>
        </div>
    </body>

    </html>

Upvotes: 4

Related Questions