Home/ Questions/Q 6566827
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:15:45+00:00

Salam all, I have an HTML page with two sections, header and content, the

  • 0

Salam all,

I have an HTML page with two sections, header and content, the header height is known and fixed, and the content height should fullfill the rest area of the webpage. While the content section fills the rest area of the webpage it should show a scrollbar if the contents are greater than the height of the webpage ( I don’t want to see a webpage scrollbar, only content DIV scrollbar).

I have done this already (I’ve got the results that I want) using Javascript,

My question is : can I make the same behaviour using CSS?

Here is the code:

CSS file (site.css):

html, body 
{ 
height:100%; 
width:100%;     
padding:0;
margin:0; 
}

#header 
{
height:85px; 
width:100%; 
background-color : yellow;
}

#container
{
height: 100%;
width:auto; 
background-color : green;
padding:2px;
margin: 0 auto;
}

#maindiv
{
height:100%;
width:100%; 
overflow:auto;
}

Html file:

<!DOCTYPE html>
<html>
<head>
<link href="Site.css")" rel="stylesheet" type="text/css"/>
</head>
<body onresize="onheightchanged()" onload="onheightchanged()">
    <table id="header">
        <tr>
            <td>
            some headers <br /> 
            some headers <br /> 
            some headers <br /> 
            some headers <br /> 
            </td>
        </tr>
    </table>
    <div id="container">
        <div id="maindiv">
            contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
            contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
            contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
            contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
            contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
            contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
        </div>
    </div>

    <script type="text/javascript">
        function getDocHeight() {
            var D = document;
            return Math.max(
                    Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
                    Math.max(D.body.clientHeight, D.documentElement.clientHeight));
        }


        function onheightchanged() {
            var container = document.getElementById("container");
            var newheight = getDocHeight() - 90; // 90 = header height (85) + padding/margin (5)
            container.style.height = newheight + "px";
        }
    </script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You probably need to set the container div absolute like this:

    #container {
   position: absolute;
   top: 85px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   overflow: auto;
   background-color : green;
}

    You can also try to use position: fixed.

    Edit: Added my version of the example:

    <!DOCTYPE html>
<html>
<head>
<style>
    html, body 
    { 
    height:100%; 
    width:100%;     
    padding:0;
    margin:0; 
    }

    #header 
    {
    height:85px; 
    width:100%; 
    background-color : yellow;
    }

    #container {
       position: absolute;
       top: 85px;
       bottom: 50px;
       left: 200px;
       right: 30px;
       overflow: auto;
       background-color : green;
    }

    #maindiv
    {
    height:100%;
    width:100%; 
    overflow:auto;
    }
    </style>
    </head>
<body>
<table id="header">
<tr>
       <td>
        some headers <br /> 
        some headers <br /> 
        some headers <br /> 
        some headers <br /> 
        </td>
    </tr>
</table>
<div id="container">
    <div id="maindiv">
        contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
        contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
        contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
        contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
        contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
        contents <br />contents <br />contents <br />contents <br />contents <br />contents <br />
    </div>
</div>
</body>
</html>
    • 0