Home/ Questions/Q 8372581
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T14:28:10+00:00

I want to create a webpage that has a fixed part at the bottom

  • 0

I want to create a webpage that has a fixed part at the bottom and, at the top, a part that will be filled dynamically with content, this dynamic part should have a scroll bar should the added content not fit, in order to stay above the fixed part.

style.css:

.action-box{
    position: fixed;
    bottom: 15px;
    margin-top: 10px;
    width: 100%;
}

index.html:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div>
    <!-- this will be filled with content -->
  </div>
  <div class="action-box">
    <!-- this is the fixed part -->
  </div>
</body>
</html>

You can see in this fiddle that the two divs overlap.

How can I make the first div scrollable, so that it won’t slide over or below the last div?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ll propose using dynamic resizing, depending on window height:

    Here is jQuery example:

    function adjustBlocks() {
    var winH = $(window).height();
    var boxH = $('#action-box').height();
    $('#content').height((winH - boxH) + 'px');
}

$(document).ready(adjustBlocks);

$(window).resize(adjustBlocks);

    Sample HTML:

    <div id="content"></div>
<div id="action-box"></div>

    And sample CSS:

    #content{
    width: 100%;
    background: #eee;
    overflow-y: scroll;
}

#action-box{
    width: 100%;
    background: #ffccaa;
}

    Of course, you can easily add any margins and mention them in jQuery resizing function.

    Oh, and the example on jsfiddle

    • 0