Home/ Questions/Q 6540291
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T10:57:38+00:00

I am having a bit of a nightmare with the CSS on a page

  • 0

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%.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0