Home/ Questions/Q 567509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T13:05:25+00:00

Basically I want to have that middle blue body part scroll minus the scrollbar

  • 0

Basically I want to have that middle blue body part scroll minus the scrollbar at the bottom. I know I can do this with javascript, i’m looking for more of a CSS solution.

On my actual site I have a div that is about 150px high that contains icons/images to do things and then the rest of the content needs to be scrollable vertically too, I want to find a solution for that too. I can cross that bridge next though.

So is there a way I can get that scrollbar to not “overflow” that bottom 30px? I know I can simulate it with another DIV there ( How to create div to fill all space between header and footer div ) but i’m going to be dynamically adding/removing elements so that really isn’t a usable solution for me.

Here is an example of a page I threw together trying to explain what I’m attempting here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing Page</title>
<style  TYPE="text/css"> 
HTML
{
    height:100%;
    overflow:hidden;
}
BODY
{
    height:100%;
    margin:0;
    overflow:hidden;
}
DIV#content
{
    height:100%;
    margin-bottom:-30px;
    background-color:blue;
    overflow:auto;
}
</style>
</head>
<body>
    <div style="height:20px;background-color:green;width:100%;">top bar</div>
    <div id="content">
        main area
        <div style="height:2000px;width:500px;background-color:yellow;">cool kids<div>
    </div>
    <div style="position:absolute;bottom:0;left:0;background-color:brown;height:30px;width:100%;">bottom bar</div>
</body>
</html>

thanks for your help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Absolute positioning.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing Page</title>
<style  TYPE="text/css"> 
HTML
{
    height:100%;
    overflow:hidden;
}
BODY
{
    height:100%;
    margin:0;
    overflow:hidden;
}
DIV#content
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 30px;
    background-color:blue;
    overflow:auto;
}
</style>
</head>
<body>
    <div style="height:20px;background-color:green;width:100%;">top bar</div>
    <div id="content">
        main area
        <div style="height:2000px;width:500px;background-color:yellow;">cool kids</div>
    </div>
    <div style="position:absolute;bottom:0;left:0;background-color:brown;height:30px;width:100%;">bottom bar</div>
</body>
</html>
    • 0