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

Alter the style attribute using JavaScript

I have a calendar table row that needs to be displayed or hidden based on the month. HTML: <tr id="bottomrow" class="week" valign="top" style="display:none;"> <td class="day" id="d36"> <div class="daynumb" id="x36">& ...

javascripthtml

What is the most effective way to alter the font within this Bootstrap template?

Check out the source code on Github. I've been attempting to modify the font-family for both h1 and body elements, but it's not working as expected. I must be overlooking something simple, but I can't seem to pinpoint the issue. It's d ...

cssfont-face

Issues have arisen in IE8 with the background gradient on hover elements in the menu, while it functions properly in all other web browsers

Welcome to the website: I've recently taken on a project involving the gradiated menu on this site. The menu works flawlessly in Firefox, Chrome, and Safari - the hover effect changes the background color to a light gradiated green. However, when it ...

internet-explorercss

Having trouble with Firefox not recognizing the linear gradient color in my CSS3 code

I'm working on implementing a linear gradient background using CSS, but I'm facing an issue with Firefox not displaying it correctly. body { height: 100%; /*background-color: #F0F0F0;*/ background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ ...

cssfirefox

No validation errors are currently being displayed. I am attempting to retrieve the error message when validation fails

My form validation error has suddenly stopped working. It was functioning properly yesterday, so I must have made a mistake somewhere, but I can't seem to pinpoint it. Now, when I attempt to sign up without entering any information, it just redirects ...

phphtmlcodeigniter

The Jquery code for Fullpage.js is causing unexpected behavior on the HTML page

While following a tutorial at the given link, I encountered an issue. Around the 9:08 mark, the instructor adds some JavaScript and demonstrates that fullpage.js is working. However, when I refresh the page after implementing the new code, it doesn't ...

htmljquerybootstrap-4

What is the best way to recreate this base with shadow, highlight effects, and a color that's not flat?

Click here to view the image I have successfully recreated part of it: a bottom with rounded corners, solid border, and solid colored background. However, I am struggling with achieving certain effects such as the highlighted top portion - where the backg ...

csshtml

Adding HTML to a webpage through the use of JavaScript's .innerHTML functionality

Currently in the process of creating a website template, I have made the decision to experiment with using an external JS file for inserting HTML at the top of the page to streamline navigation (eliminating the need for manual copying and pasting). My att ...

javascripthtml

"Is there a way to verify the existence of checkbox array values within a database using PHP Laravel

In order to display checkboxes for each country that exists in the database, I need to verify if the countries in the database match with those in the list. Since the values are retrieved directly from the database and can't be set as input values due ...

javascriptphphtmlsqllaravel

Choosing the attribute value using jQuery/CSS

Looking for a way to retrieve attribute value using jQuery/CSS <dt onclick="GomageNavigation.navigationOpenFilter('price-left');"> I tried using $("dt[onclick='GomageNavigation.navigationOpenFilter('price-left')']") bu ...

javascriptjqueryhtmlcss

The jQuery.slide() function is causing dynamic changes in the table columns

I have a unique situation with a table where some data is initially hidden and can be expanded by clicking a button. I am implementing the technique outlined here. Here is the HTML markup I am using: <button class="toggleBtn">Hide/Show</ ...

jqueryhtmlhtml-tablejquery-slider

Struggling to make the toggle button appear on the bootstrap navbar when shrinking the resolution

Everything seems to be working well with the navbar initially, but when resizing the screen to a smaller resolution, all the navigation items disappear and the "hamburger icon" fails to appear. <nav class="navbar navbar-custom navbar-expand-md fi ...

htmlcssbootstrap-4

Sending information via HTML on an iPhone

Posting form data on a website typically involves using the following HTML code with a post request: <div id="requestinfo"> <form method="post" action="http://abc/form-post.php" id="request_form"> <input type="hidden" name="fiel ...

iphonehtmlhttp-post

How to use Jquery to dynamically alter cell backgrounds in a table based on their values?

I successfully imported the table from MySQL to HTML, as shown below: My script is designed to highlight the two lowest and two highest values in each column: $(document).ready(function(){ var $table = $("#tbTodos"); $table.find("th").each(functio ...

jquerycsshtml-tablecellhighlight

Difficulty with JQuery Show and Hide Functionality

I've implemented a jQuery menu, but encountering the issue where clicking on any menu link opens all menus instead of just the one clicked. I've attempted to resolve this by using show and hide classes, however, it seems that nothing is working n ...

jqueryhtmlcss

Choosing between setting a height of 100vh versus a minimum height of 100vh

In the development of my app, I noticed an interesting issue. When I set the background on the html with a height of 100vh and resize the viewport to cause vertical overflow, the background does not cover the overflowed content: html { height ...

htmlcss

Getting data in a ng-Dialog Modal with AngularJS is a breeze!

Hi there, I'm new to Angular JS and facing an issue with displaying data from my MySQL database in a table as well as in a modal for more detailed information: I've included the HTML file named _detail_modal.html at the bottom of the page. ...

javascripthtmlangularjsng-dialog

Creating Responsive Headers Using CSS for Mobile Devices

I'm looking to make my header font size of 60px more responsive for mobile devices so that the text doesn't get cut off. Any suggestions on how to achieve this? Thank you! Here's the code snippet: h1 { font-size: 4.286em; /* 60px */ margi ...

css

Creating a Consistent Look for Italic Font Formatting in Tailwind

In an effort to establish consistent typography on a website being developed by my team, we have devised custom utility classes in Tailwind. One of these classes, small-italicized, also requires the text to be italicized. However, it seems that the fontSiz ...

javascriptcssreactjsnext.jstailwind-css

"When setting up a window.EventListener, the Div element fails to be hidden when setting its display property to 'none

I'm working on creating a preloader by displaying an overlay until all the content on the page is loaded. However, despite checking my code multiple times, I can't seem to figure out why it's not working. If anyone could provide some assist ...

javascripthtmlcss