Is there a way to create a fixed container aligned to the right and have the parent container handle scrolling?

Question

Is there a way to create a fixed container aligned to the right and have the parent container handle scrolling?

My setup is as follows:

Full width, 100px height header
- The header is always visible at the top.
Full width, remaining height details
- The content of details can scroll vertically and horizontally.
- A fixed 200px width, full height container is right-aligned to the details.
- The detail container controls the scrolling, and there is padding on the right to account for the right-aligned frozen section.

The body of the page does not scroll at all; only the details container does.

This is how I envision it looking: https://jsbin.com/mowojix/5/edit?html,css,output. However, once you start scrolling, you'll notice that the right-aligned container remains in place and moves with the scroll. Here, I have placed the right-aligned container inside the scrollable container to keep it within the scrollbars.

This is how I want it to function: https://jsbin.com/mowojix/7/edit?html,css,output. However, you might observe that the right container sits above the scrollbars. In this case, I've positioned the right-aligned container outside the scrollable container so it can remain floating on the right side.

I believe I must be overlooking something simple here. Any ideas?

html css

Answer 1

Answer №1

Hopefully this solution meets your needs. I have implemented the code to fix the header and side elements while still relying on the browser scrollbar.

body {
  margin:0;
  padding:0;
}

.header {
  position:fixed;
  top:0;
  left:0;
  height:100px;
  width:100vw;
  background:red;
}

.main {
  margin-top:100px;
  background:lightblue;
  max-height:calc(100vh - 100px);
  max-width:100vw;
}

.main-content {
  width:200vw;
  height:200vh;
  background:blue;
}

.side {
  position:fixed;
  right:0;
  top:100px;
  background:green;
  width:200px;
  height:60vh;
}

    <body>
      <div class="header">
        Header
      </div>

      <div class="main">
        <section class="main-content">Main content area</section>
        <section class="side">Side</section>
      </div>
    </body>

Answer 2

Hopefully this solution meets your needs. I have implemented the code to fix the header and side elements while still relying on the browser scrollbar.

body {
  margin:0;
  padding:0;
}

.header {
  position:fixed;
  top:0;
  left:0;
  height:100px;
  width:100vw;
  background:red;
}

.main {
  margin-top:100px;
  background:lightblue;
  max-height:calc(100vh - 100px);
  max-width:100vw;
}

.main-content {
  width:200vw;
  height:200vh;
  background:blue;
}

.side {
  position:fixed;
  right:0;
  top:100px;
  background:green;
  width:200px;
  height:60vh;
}

    <body>
      <div class="header">
        Header
      </div>

      <div class="main">
        <section class="main-content">Main content area</section>
        <section class="side">Side</section>
      </div>
    </body>

Is there a way to create a fixed container aligned to the right and have the parent container handle scrolling?

Answer №1

Similar questions

In the realm of web development, the Phoenix library introduces the concept

What is the process for including a field specific to a date in a form?

Tips on connecting a font directory from FontAwesome

Tips for effectively displaying HTML data from a database on a web browser

Guide on breaking up a string into separate lines

GSAP also brings scale transformations to life through its animation capabilities

Displaying or hiding table columns in Vue.js Element-UI el-table based on screen width: a step-by-step guide

Is there a way to shift this modal to the right?

Using media queries in VueJS style tags may not have the desired effect

Using Placeholder Attribute in HTML5 Inside Struts HTML:text Tag

Fixing the issue of a div exceeding the height of its parent div in Tailwindcss

Connecting two divs with lines in Angular can be achieved by using SVG elements such as

What is the best method to insert multiple rows of the same height into a table cell in

Discovering what is impeding the rendering of a webpage

Markdown boasts of a sturdy partially-horizontal line

Distinct "namespaces" within HTML

Validation on the client side will now support the input of comma-separated values

Execute a script upon page load

I'm looking to transfer my stringified object into the HTML body. How can I achieve

Utilizing a flexbox container within a table container, implementing PRE tags for handling overflow