Header, footer, and sidebars are all locked in place, while the central content area is designed for

Using this Demo Template as a starting point, I am looking to create a new layout:

However, I am encountering the following challenges:

  • The two sidebars are not properly contained within the scrollable content div.
  • The content div does not have a fixed size.
  • The scrollable content does not display a scrollbar when it's overflowing.
  • It would be ideal if the main scrollbar of the browser could be utilized.

Is there anyone who can assist me in resolving these issues?

htmlcss

Answer №1

Utilizing the Power of CSS Grid Layout

By employing the display:grid property, you can take advantage of advanced CSS features such as Grid Layout, CSS Variables, and position:sticky. While these may not be universally supported across all browsers, there are methods to work around limitations or graceful degradation with static values and feature detection using @supports.

/* Remove unnecessary margins/padding */
html, body { margin: 0; padding: 0 }

.wrapper {
  display: grid;
  /* Header and footer span the entire width, sidebars and content are fixed, with empty space on sides */
  grid-template-areas:
    "header header header header header"
    "empty_left sidebar_1 content sidebar_2 empty_right"
    "footer footer footer footer footer";
  /* Only expand middle section vertically (content and sidebars) */
  grid-template-rows: 0fr 1fr 0fr;
  /* 100% width, but static widths for content and sidebars */
  grid-template-columns: 1fr 100px 400px 100px 1fr;
  /* Force grid to be at least the height of the screen */
  min-height: 100vh;
}
.header {
  grid-area: header;

  /* Stick header to top of grid */
  position: sticky;
  top: 0;
  /* Ensure header appears on top of content/sidebars */
  z-index: 1;

  /* General appearance */
  background-color: #FCFF34;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem;
}
/* Save header height to properly set `padding-top` and `margin-top` for sticky content */
:root {
  --header-height: calc(1rem * 1.5 + 1rem * 2);
}

.sidebar-1 {
  grid-area: sidebar_1;
}
.sidebar-2 {
  grid-area: sidebar_2;
}
.sidebar-1,
.sidebar-2 {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;

  /* Styling to match reference */
  background-color: #BC514F;
}

.content {
  grid-area: content;

  /* General appearance */
  background-color: #99BB5E;
}
.footer {
  grid-area: footer;

  /* Stick footer to bottom of grid */
  position: sticky;
  bottom: 0;

  /* General appearance */
  background-color: #FCFF34;
  text-align: center;
  font-size: .8rem;
  line-height: 1.5;
  padding: .5rem;
}
/* Save footer height to properly set `bottom` and `min-height` for sticky content */
:root {
  --footer-height: calc(.8rem * 1.5 + .5rem * 2);
}

.sticky-spacer {
  flex-grow: 1;
}
.sticky-content {
  position: sticky;
  bottom: var(--footer-height);
  min-height: calc(100vh - var(--footer-height));
  box-sizing: border-box;

  --padding: 10px;
  padding:
    calc(var(--header-height) + var(--padding))
    var(--padding)
    var(--padding);
  margin-top: calc(0px - var(--header-height));
}
<div class="wrapper">
<div class="header">Header (Absolute)</div>
<div class="sidebar-1">
  <div class="sticky-spacer"></div>
  <div class="sticky-content">Sidebar 1 Absolute position, Fixed width</div>
</div>
<div class="content">
  <div class="sticky-spacer"></div>
  <div class="sticky-content">
    Scrollable content<br><br>
    line 1<br><br>
    line 2<br><br>
    line 3<br><br>
    line 4<br><br>
    line 5<br><br>
    line 6<br><br>
    line 7<br><br>
    line 8<br><br>
    line 9<br><br>
    line 10<br><br>
    line 11<br><br>
    line 12<br><br>
    line 13<br><br>
    line 14<br><br>
    line 15<br><br>
    line 16<br><br>
    line 17<br><br>
    line 18<br><br>
    line 19<br><br>
    line 20
  </div>
</div>
<div class="sidebar-2">
  <div class="sticky-spacer"></div>
  <div class="sticky-content">
    Sidebar 2 Absolute position, Fixed width<br><br>
  line 1<br><br>
  line 2<br><br>
  line 3<br><br>
  line 4<br><br>
  line 5<br><br>
  line 6<br><br>
  line 7<br><br>
  line 8<br><br>
  line 9<br><br>
  line 10
  </div>
</div>
<div class="footer">Footer (Absolute)</div>
</div>

Customized Scrollbar for Main Content Area

You have control over the width of the content box, including the sidebars. The scrollable content area is the only section that will scroll, while the sidebars, footer, and header will overflow if needed. To ensure a seamless experience, consider implementing media queries to adjust layout on smaller screens or setting specific dimensions using min-height for content and min-width for the body.

html, body {
    height:100%;
    margin:0;
    padding:0;
}
header{
    width: 100%;
    background: yellow;
    position: fixed; 
    top: 0;
    height: 60px !important;
    opacity:.8;
}

.content {
    position:relative;
    height: 100%;
    width:600px; /* Sizing - any length */
    padding:60px 0 30px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1, .sidebar2 {
    background: red;
    top:60px;
    bottom:30px;
    width: 100px;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1 {
    left:0;
}

.sidebar2 {
    right: 0;
}

#scrollable2 {
    background:green;
    height: 100%;
    min-width: 300px;
    margin-left: 100px;
    margin-right: 100px;
    overflow:auto;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

footer {
    width: 100%;
    background: yellow;
    position: fixed; 
    bottom: 0;
    height: 30px;
}
<!-- Always on top: Position Fixed-->
<header>
    header
</header>
<!-- Fixed size after header-->
<div class="content">
    <!-- Always on top. Fixed position, fixed width, relative to content width-->
    <div class="sidebar1">
        sidebar-left
    </div>
    <!-- Scrollable div with main content -->
    <div id="scrollable2">
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
    </div>
    <!-- Always on top. Fixed position, fixed width, relative to content width -->
    <div class="sidebar2">
        sidebar-right
    </div>
</div>
<!-- Always at the end of the page -->
<footer>
    footer
</footer>

Leveraging Browser's Main Scrollbar

If you opt to utilize the browser's primary scrollbar, keep in mind that it will affect scrolling behavior for the sidebars as well. The content will smoothly scroll alongside the rest of the page elements.

html, body {
    height:100%;
    margin:0;
    padding:0;
}
header{
    width: 100%;
    background: yellow;
    position: fixed; 
    top: 0;
    height: 60px !important;
    z-index:100;
}

.content {
    position:relative;
    min-height: 100%;
    width:600px; /* Sizing - any length */
    padding:60px 0 30px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
}

.sidebar1, .sidebar2 {
    background: red;
    height:100%;
    width: 100px;
    top:0;
    padding-top:60px;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1 {
    
    left:0;
    
}

.sidebar2 {
    right: 0;
}

#scrollable2 {
    height:100%;
    background:green;
    min-width: 300px;
    margin-left: 100px;
    margin-right: 100px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

footer {
    width: 100%;
    background: yellow;
    position: fixed; 
    bottom: 0;
    height: 30px;
}
<!-- Always on top: Position Fixed-->
<header>
    header
</header>
<!-- Fixed size after header-->
<div class="content">
    <!-- Always on top. Fixed position, fixed width, relative to content width-->
    <div class="sidebar1">
        sidebar-left
    </div>
    <!-- Scrollable div with main content -->
    <div id="scrollable2">
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
    </div>
    <!-- Always on top. Fixed position, fixed width, relative to content width -->
    <div class="sidebar2">
        sidebar-right
    </div>
</div>
<!-- Always at the end of the page -->
<footer>
    footer
</footer>

Answer №2

UPDATE
1. Include the position attribute with a value of absolute for the specific div you want to keep in place.
2. Ensure that the overflow property of the body remains as auto.

Note: Changing the z-index of the body to -1 may result in the rest of the body being inaccessible.
For more information, visit:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am looking to modify the ID of the select element nested within a td tag

This is the code snippet I am working with: <tr> <td class="demo"> <label>nemo#2 Gender</label> <select id="custG2" required="required"> <option>....</option> <option>M</option> ...

javascriptjqueryajaxhtml

Steps to activate overflow on `react-bootstrap` NavDropdown

I'm having a bit of trouble with using react-bootstrap's NavDropdown in my NavBar to display a list of data. Sometimes, the list extends beyond the view and gets cut off at the bottom. I want to add overflow: auto to the list to make it scrollabl ...

cssreactjsreact-bootstrapcss-modules

Can the default position of the scrollbar be set to remain at the bottom?

I have a select option tag with a scrollbar to view the contents in the dropdown. I am looking for a way to automatically position the scroll at the bottom when an item is selected from the dropdown. jquery code $('document').ready(func ...

javascripthtmljquerycssfrontend

Fixing the height of the body padding with JS or JQuery for a

I have a rather straightforward question that pertains to an issue I am facing while building a website using BS4. Specifically, my problem revolves around a fixed-top navbar with the class "fixed-top". The challenge stems from not knowing the actual heig ...

javascriptjqueryhtmltwitter-bootstrap

Aligning Content in the Header

Currently, I am attempting to place a logo on my WordPress site right at the top of the header above the menus and in the center. Even though I've positioned it at the top, I'm struggling to align it horizontally in the center. I've experime ...

jqueryhtmlcsswordpress

Adjusting data points on a radar chart.js through user interaction

I have a radar map generated using chart.js, along with some input fields where users can enter values that I want to reflect in the graph. I am exploring ways to update the chart dynamically as the user types in the values. One option is to have the char ...

javascripthtmlinputchart.jsradar-chart

What is the best way to modify the background color of a whole div when hovering over it

Recently, I encountered a challenge while working on my website. I want to set up a link inside a div that changes color when hovered over. However, the desired effect is not quite coming out as expected. Before hovering, I aim to have a border around the ...

htmlcss

What is the best way to create non-standard text wrapping in HTML and CSS that is both semantic and sleek, avoiding square or circular shapes?

Is there a way to achieve text wrapping like this using semantic and clean HTML and CSS that is compatible with all browsers? The only solution I can think of is adding different classes to the <p> element. However, the drawback of this approach is ...

jquerycssxhtml

Folded Corner Div using only CSS

I've been tirelessly experimenting with countless online methods, but I can't seem to make anything work. There's a div that needs to be flexible in width and height, positioned on a tile-able background image with a 1px border. The challe ...

css

Utilizing CSS or JavaScript to define the input type

I currently have a group of checkboxes displayed on a webpage within a DIV labeled OPTIONS, shown below: <div id="options"> <input type="checkbox"..... > <input type="checkbox"..... > <input type="checkbox"..... > <input t ...

javascriptcssformshtml

An error occurs when trying to modify the classList, resulting in an Uncaught TypeError for setting an indexed property

I am attempting to modify the classes of multiple sibling elements when a click event occurs. Some of these elements may have multiple classes, but I always want to change the first class. Below is the code that I created: let classList = event.currentTa ...

javascriptcsscss-selectors

What is the best way to change the value of a div using JavaScript?

i could really use some assistance, i am trying to ensure that only the selected template is shown on the screen, while all others are hidden. The expected outcome should be to replace the values of: <div class="city">City<span>,< ...

javascripthtmlfunction

Ensure that the divs are properly aligned with the paragraphs

I received assistance previously, and I am seeking additional help in maintaining the position or adjusting the size of elements to fit different window viewport sizes such as tablets, mobile devices, or varying monitor sizes while keeping the appearance c ...

htmlcssresize

Basic PHP code converted into a JavaScript function for an onSubmit event within an HTML form

I have been trying to figure this out for hours. The goal is to submit a form only if one of the inputs matches a PHP echo. To simplify the script, it looks something like this: <head> </head> <body> <?php $A = rand(0,10); $B = r ...

javascriptphphtmlonsubmit

Customize specific styles for individual divs one at a time (without the use of jQuery)

Can you assist me with this issue? I am trying to display the <span class="badge badge-light"><i class="fa fa-check-circle"></i></span> tag (initially set to "visibility: hidden") when clicking on a div with the class "role-box". He ...

javascripthtmlangular

Display a particular frame upon the initial loading of a Lottie animation

I've successfully integrated a lottie animation into my code. On the initial load, I'd like to display a specific frame. When the user hovers over it, I want the animation to start from the beginning and play through in its entirety. Here's ...

htmljsonanimationlottiebodymovin

When a base html tag is dynamically added, the browser mistakenly loads assets twice

When managing relative paths on a website, I utilize the <base> tag within the <head> section of each page. Although all resources loaded via relative-like paths in the documents are displayed correctly, my observations show that browsers such ...

javascriptjqueryhtmloffline-browsing

Mastering the placement of script tags in your Next.js application with Next Script

I'm in the process of integrating a third-party script into my Next.js website. This particular script adds an iframe right below its corresponding script tag. Therefore, it is crucial for me to have precise control over the placement of the script ta ...

javascripthtmlreactjsnext.js

Angular js is a powerful framework that allows for the seamless transition of views, except for the home

I am currently using the ng-animate module to implement sliding effects for my app views. Each route has its own unique slide animation. Take a look at my simple code below: HTML: <div ng-view ng-animate class="slide"></div> CSS: /*Animatio ...

javascriptcssangularjsslideng-animate

Creating a toggle label using just CSS: a step-by-step guide

Recently, I was trying to create a toggle label using HTML, CSS, and JavaScript. Here is the code snippet that I experimented with: function genre_itemclick(item){ if(item.classList.contains('light_blue_border_button')) { ...

javascripthtmlcss