Primary scrollbar utilized in the parallax content section

Considering setting up the page layout where the HTML has overflow: hidden, with a fixed header and footer, while allowing the body content to have overflow: scroll.

The current challenge is that the scrollbar appears within the content div. Is there a way to make the browser's primary scrollbar only interact with the content div?

Relevant CSS:

html {
   overflow: hidden;
}
header {
   position: fixed;
   width: 100%;
   height: 15%;
}
footer {
   position: fixed;
   width: 100%;
   bottom: 10%;
   height: 5%;
}
#content {
   position: fixed;
   height: 80%;
   max-width: 960px;
   margin: 0 auto;
   overflow: scroll;
}

Here is the concept: http://jsfiddle.net/6gcfx/ (please note that the primary scrollbar in this demo does not move the content as desired).

Answer №1

To implement percent height in your layout, you can follow this method. Apply position:fixed to the header and footer, and use position:absolute for the body.

html { overflow: hidden; }
header {
    position: fixed;
    top: 0;
    height:15%;
    width: 100%;
    background: #ccc;
}
#content {
    overflow: scroll;
    height: 70%;
}
footer {
    position: fixed;
    bottom:0%;
    height:15%;
    width: 100%;
    background: #ccc;
}

http://jsfiddle.net/Zeaklous/6gcfx/1/

If the heights of the header and footer are not in percentage, consider using calc() function. However, be mindful that this method may require more modern browsers, so a JavaScript fallback might be necessary for older browser support.

html { overflow: hidden; }
header {
    position: fixed;
    top: 0;
    height:75px;
    width: 100%;
    background: #ccc;
}
#content {
    position:absolute;
    top:75px; /* Height of header */
    overflow: scroll;
    height: calc(100% - 125px); /* 100% - (headerHeight + footerHeight) */
}
footer {
    position: fixed;
    bottom:0%;
    height:50px;
    width: 100%;
    background: #ccc;
}

http://jsfiddle.net/Zeaklous/6gcfx/2/

Answer №2

Excuse my lack of experience, but I believe I have identified the issue. Make this adjustment to your content div:

#content {
position:float;
top:(header size);

Also, update the header and footer with:

position:fixed;

This way, the content will scroll along with the page scroll bar while the header/footer remain fixed in place.

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'm using Selenium XPATH or CSS to identify and select a checkbox within an HTML table based on the specified text. As a result, I have successfully

I am trying to select a checkbox from an HTML table with multiple columns. Specifically, I want to choose the checkbox that corresponds to the "CLEAN_AUDIT" option for the Name column. However, my current XPATH is selecting 4 checkboxes labeled CLEAN_AUDIT ...

Tips for resolving the Bootstrap 4 carousel glitch

Hello, I am currently working on implementing a multi-item Carousel that moves one item at a time with each click. However, in my case, clicking the right arrow results in the entire slide changing. To help you understand better, I have provided a link to ...

Place the image at the bottom of its parent div without using absolute positioning

Is there a way to place an <img> element at the bottom of its parent <div> without using position: absolute or position-absolute class while maintaining the design integrity? Using absolute positioning disrupts the entire layout I have created ...

Flexbox positioning: Absolute element within a relative container

Having a div using display:flex and position:relative, I am looking to add an overlay element at the bottom of this div by applying position:absolute to it. Ideally, the height of the overlay should be auto, but it's not necessary. The issue arises wh ...

Align both text and images in the middle using HTML/CSS

I attempted to align an image next to text and center everything, but I'm facing some challenges. The arrow indicates where I would prefer the image to be placed. HTML <!DOCTYPE html> <head> <title>Simple Page</title> ...

The automated filling of dropdown options is not being saved in the MySQL database

After using a form and JavaScript to populate the second dropdown menu based on the selection made in the first dropdown, everything seems to be working fine. The second dropdown changes and displays results according to my selection. However, when I submi ...

Learn the method for printing CSS outlines and background colors in IE8 using JQuery's printElement feature

Printing my HTML calendar table in Chrome results in a perfect display. However, when I try to print it in IE8, the background colors and images are not included. Despite following steps from a helpful post on setting it as the default option, there were n ...

disableDefault not functioning properly post-fadeout, subsequent loading, and fade-in of new content with a different URL into

After extensive searching, I still haven't found a solution to my problem. My task involves bringing in HTML pages into a div element. I managed to make the content fade out, load new href content, and then fade in the new content. However, I'm ...

Detecting file corruption from a form-based web page file upload (using input type="file")

Can file corruption occur during the process of uploading a file through a web form? Specifically, when an input of type "file" is included in a form submission and the file is saved on the server (typically in a designated temporary upload directory). Is ...

I am facing an issue where my CSS file is not connecting with my HTML

I added the link to my html pages, but my css is only showing up on the first page and not on any of the others. <head> <title>Angels Drawings</title> <link rel="stylesheet" href="style.css"> <STYLE> <!- ...

Alignment of Bootstrap responsiveness shifted to the left rather than the center

My HTML Code: <div class="gridrow" id="eventsrow"> <div class="gridcard" id="eventcard" style="float:left;width:100%;height:100%;margin-bottom:0.5rem;background-color:white"> <div class="event container"> <div clas ...

Utilizing Jquery to apply CSS styles to three div elements sequentially with a timed loop of N seconds for each

I have 3 different HTML divs as shown below: HTML <div id="one" class="hide">Text one</div> <div id="two" >Text two</div> <div id="three" class="hide">Text three</div> I am looking to use jQuery to dynamically change ...

Issue with CSS styling on a content slider causing the last picture to display incorrectly

I recently updated a Content Slider and tweaked the styles to my preference. Check out the changes I made on this link. In addition, I included an extra Thumbnail Picture on the right (7th one) along with the Main Picture. Oddly enough, the Slider seems ...

Steps for positioning a RadioButtonList at the center of a table cell

How can I easily center a RadioButtonList? It used to be straightforward, but for some reason the below HTML is not working. Can you spot what's missing? <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></ ...

Steps to incorporate Ajax into current pagination system built with PHP and Mysql

Greetings! I am a beginner programmer looking to enhance my PHP & Mysql based pagination with Ajax functionality. Despite searching through numerous tutorials, I have been unsuccessful in finding a guide that explains how to integrate Ajax into existin ...

Achieving Navbar overlap on Carousel with Bootstrap

Is there a way to make the bootstrap navbar overlap with the carousel without causing any issues with #test? HTML <nav class="navbar navbar-expand-lg navbar-dark bg-dark floating-navbar"> <div class="container"> & ...

Spilling over: Harnessing the power of flexbox

After searching extensively for a solution on how to control the overflow of a parent container with flexbox, I couldn't find one. So here's another question regarding the same issue. What I want: The problematic part is commented in the HTML co ...

Dealing with alternating rows in a dynamic manner: tips and tricks

Exploring an example scenario: (view live demonstration) Sample HTML structure: <div class="wrapper"> <div city_id="1" class="odd">Street Name #1 in city 1</div> <div city_id="3" class="even">Street Name #2 in city 3</d ...

Place the border image underneath the div element

I successfully added a border image to the right side of my div, but now I want it to extend slightly below the div. Is there a way to increase the height of the border image? Or should I just float the image next to the div and how would I go about doing ...

Is there a way to bypass using prompt() in JavaScript without relying on HTML elements?

Currently, I am developing a JavaScript program that involves using the canvas. However, I have encountered an issue with the prompt() function as it has been deprecated in Electron Fiddle which is my current development environment. I need to find an alt ...