Html Question posted in
Some basic documentation can be found here.

Html – Scrollable resizable div with fixed button

The following HTML shows a scrollable resizable div with a button and a further content div in it.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 100%;
        max-width: 100%;
        height: 150px;
        position: relative;
        overflow: auto;
        resize: both;
        white-space: nowrap;
        background: lightgray;
      }

      .container .fixed {
        position: absolute;
        right: 5px;
        top: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <button class="fixed">Test</button>
      <div class="content">
        texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
      </div>
    </div>
  </body>
</html>

The button should be fixed at the top right corner in the div. This works fine for resizing, however, when I scroll, the button moves too. How can I fix this?

Tags:

3

Answers


  1. 0

    In the .container selector, you have overflow: auto;. Move overflow: auto; to a selector that targets the .content class only:

    .container {
    width: 100%;
    max-width: 100%;
    height: 150px;
    position: relative;
    resize: both;
    white-space: nowrap;
    background: lightgray;
  }

  .container .fixed {
    position: absolute;
    right: 5px;
    top: 5px;
  }

  .content {
    overflow: auto;
  }

    We only select .content to only add a scrollbar to that div.

    Login or Signup to reply.
  2. 0

    You could do the following to keep the sizing of the content div and keep the button independent. Leveraging the z-index means you can keep the button’s visibility, too.

    <style>
  .container {
    // ready for other items
  }

  .container .fixed {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10;
  }

  .container .content {
    width: 100%;
    max-width: 100%;
    height: 150px;
    position: relative;
    overflow: auto;
    resize: both;
    white-space: nowrap;
    background: lightgray;
    z-index: 5;
  }
</style>
    Login or Signup to reply.
  3. 0

    You should move the style overflow: auto inside the content class.

    Also, adjust the content class to have a height of 100% if you intend to scroll inside container div, if not you can remove height: 100% and scroll within the content itself.

    <!DOCTYPE HTML>
<HTML>
  <head>
    <style>
      .container {
        width: 100%;
        max-width: 100%;
        height: 150px;
        position: relative;
        resize: both;
        white-space: nowrap;
        background: lightgray;
      }

      .container .fixed {
        position: absolute;
        right: 5px;
        top: 5px;
      }

      .container .content{
        overflow: auto;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <button class="fixed">Test</button>
      <div class="content">
        texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
      </div>
    </div>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search