Limit scrolling to the div element only

Check out the demo linked on JSFiddle

CSS FILE:

html, 
body {min-height:100%; padding:0; margin:0;}

#wrapper {padding:50px 0; position:absolute; top:0; bottom:0; left:0; right:0;}
#content {min-height:100%; background-color:green}
header {margin-top:-50px; height:50px; background-color:red;}
footer {margin-bottom:-50px; height:50px; background-color:red;}

HTML: 

<div id="wrapper">
    <header>header text</header>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ligula justo, et varius mauris. Vivamus eleifend feugiat tortor ut egestas. Donec risus diam, vestibulum ut pharetra vitae, scelerisque quis tellus. Fusce pharetra, diam ut facilisis scelerisque, magna nisl viverra lectus, vel malesuada erat odio nec quam. Sed placerat tellus et turpis rhoncus semper. Sed at molestie turpis. Duis purus dui, ornare ut tristique nec, aliquet et purus. Mauris ullamcorper accumsan elit, vel semper justo accumsan non. Aliquam viverra metus nibh. Maecenas tempus, sapien eu semper pellentesque, lacus nisi venenatis purus, id pretium justo ipsum ac lorem.</p>
        <p>Donec auctor enim eu ligula congue quis rutrum ipsum dictum. Phasellus hendrerit, libero ultrices tristique vulputate, urna nunc blandit urna, vel vulputate urna nibh sit amet massa. Mauris erat nisl, rutrum vel rutrum et, feugiat eget diam. Morbi facilisis magna a sem consequat mattis. Sed et ante dolor, nec vulputate nibh. Sed tristique convallis purus quis fringilla. Aenean nec justo vitae dui elementum egestas sit amet et lorem. Praesent hendrerit adipiscing lectus. Nullam varius vulputate arcu, sed iaculis est accumsan sit amet. Vestibulum fringilla, est eget feugiat pretium, elit odio rhoncus mauris, non lacinia velit mi eu turpi...
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non odio libero, id ultrices quam. Nam dictum ligula in tellus condimentum dignissim. Duis dignissim pellentesque pretium. Curabitur tincidunt urna vitae sapien pulvinar ut auctor mi tempus. In ultricies mollis commodo. Pellentesque vitae odio id ligula dapibus porttitor id et nunc. Phasellus dui libero, posuere egestas lobortis ut, vestibulum sed nulla. Nullam vel orci enim. Proin felis ligula, vulputate eget consectetur vitae, malesuada vitae tortor. Quisque cong...
        <p>Pellentesque non augue non turpis condimentum vehicula vel hendrerit diam. Nam mi magna, pharetra et euismod sed, tincidunt at est. Nullam dui purus, convallis a volutpat eget, consectetur quis enim. Sed porttitor urna at lorem dignissim ornare. Nunc a ipsum vulputate ipsum elementum tristique. Morbi in tellus volutpat massa gravida accumsan. Nullam hendrerit condimentum nunc eu ultrices. Ut nisi neque, mattis sed tristique eget, commodo vitae nulla. In vel mi nulla. Ut luctus, augue non sagittis mattis, magna elit laoreet nibh, pha...
    </div>
    <footer>footer text</footer>
</div>

I'm looking for a way to keep the header and footer fixed while allowing only the div content to scroll. Is there a method to show the scrollbar only between the header and footer without having it overlap them?

csshtml

Answer №1

Take a look at the newly revised jsFiddle link

Implementing the use of position:fixed for the header, footer, and content sections, along with adding overflow-y:scroll to the content.

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 struggling to concentrate and unable to type in the email field

Today while working on a website, I encountered something strange. In the footer section of the site, there is a quick contact form. However, I noticed that in Firefox, I am unable to focus on the email field. Surprisingly, this issue does not occur in Chr ...

javascriptcssdrupaldrupal-7drupal-webform

Angular API data causing an undefined error in the template

When attempting to display values in an HTML template from API data, I encountered an issue. Despite not defining all the values in the object, the data is displayed correctly. However, an error appears in the console: TypeError: Cannot read property &ap ...

htmljsonangular

Refresh content on an HTML page using information retrieved from an external PHP post request

So, I have a problem with communication between my two web pages - mobile.html and video.php. The idea is for mobile.html to send an AJAX post request containing a single variable to video.php. Video.php should then read this variable and pass it to a Java ...

javascriptphphtmlajaxpost

The latest approach to creating a layout with a full 100% height using HTML5 and CSS3

After taking a break from coding websites, I've realized that HTML5 and CSS have introduced a lot of new features. I typically design sites with a fixed size header and footer, with the main content area in between. The default page should take up 100 ...

csshtmllayout

VueJS Components experiencing issues with displaying images

Recently, I delved into learning VueJS and successfully created a basic restaurant menu page all within a single file. Excited by my progress, I decided to refactor the project using vue-cli, but hit a snag with the images not displaying properly. The cur ...

javascripthtmlimagevue.jsvue-component

"Looking to spice up your website with a dynamic background-image

I've encountered a problem with my CSS code for the header's background image. Despite trying various methods to create a slideshow, nothing seems to be working. Can someone provide guidance? I have four banner images named banner1, banner2, bann ...

javascripthtmlcssslideshow

Is there a way to switch the main image by clicking on different thumbnails in a sidebar using javascript/jQuery

Currently on my page, I have a large plot created with jqplot along with a sidebar containing several smaller plots. I am trying to find a way to dynamically change the large plot based on which of the smaller plots the user clicks on, without needing to ...

javascriptjqueryhtml

Do double forward-slash comments work in CSS code?

Is using a double-forward slash (//) for single-line comments in CSS considered reliable and supported by mainstream browsers and CSS interpreters according to the specification? ...

csscomments

Experiencing difficulty aligning the Material UI grid to float on the right side

I'm currently in the learning phase of material-ui and encountering an issue with floating the grid content to the right side. Despite trying alignItems="flex-start" justify="flex-end" direction="row" in the container grid, as well as using the css p ...

cssreactjsmaterial-ui

A mobile phone screen cannot be fully filled by an image

I'm working on a way for an image to cover the entire screen of a mobile phone. However, when I preview it on an iPhone through a laptop, the image only covers a small portion of the iPhone's screen rather than filling it completely. Below is the ...

javascripthtmlfullscreen

Identify the occurrence of isolated "<" or ">" characters in a string that includes HTML elements

As an example, consider a string similar to: "This is a <b> Sample </b> string with characters < 100" The user has the ability to include HTML tags such as <b>, <div>, and more. These tags are permitted in this scenario. The ma ...

html

Ways to enable users to add or modify spry widgets

Is there a way to make it easier for users to edit spry accordions/tabbed panels in a navigation tool for locating points in PDFs? The PDFs are updated regularly, so the navigation will need frequent updates. The users who will be maintaining this tool h ...

javascripthtmldreamweaverspry

Cropping and resizing images

Within my angular application, I have successfully implemented image upload and preview functionality using the following code: HTML: <input type='file' (change)="readUrl($event)"> <img [src]="url"> TS: readUrl(event:any) { if ...

javascripthtmlangulartypescriptcanvas

Choosing an element within a table following a different element using Selenium

On a webpage, a table displays various plain text elements (filenames) on the left side and hyperlinks to PDF files on the right: Red report Download PDF Blue report Download PDF Green report Download PDF These pages have multiple entries, and t ...

htmlselenium

Stacking sheets of hole-punched paper on top of one another, create a visually captivating

I am in search of a way to create those distinctive black dots with papers displayed here: body { background: linear-gradient(#ccc, #fff); font: 14px sans-serif; padding: 20px; } .letter { background: #fff; box-shadow: 0 0 10px rgba ...

javascripthtmlcss

What is the best way to align three images in the center on a single line below the header text using html and css?

I've been working on centering three images under the h1 text, but I'm struggling to figure it out. I tried using div to wrap all the elements and align them with text-align. I also gave each image its own ID and attempted to position them using ...

htmlcss

Troubleshooting: CSS border-radius issue with embedded iframe

I am struggling to embed an iframe from my Blogger site into a specific section on my website and round its corners using CSS. I followed a tutorial that suggested using overflow: hidden;, but for some reason, it's not working in my case - see the ima ...

htmlcssiframe

unable to display content from an external page within a DIV element

Here is the code I am using to load an external file inside a div: EXAMPLE <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.re ...

jqueryhtmlcss

Using `appendChild` in combination with `createElement`

Is there a difference between these two approaches: var div = document.createElement('div');//output -> [object HTMLDivElement] document.getElementById('container').appendChild(div); and: var div = '<div></div>&a ...

javascripthtmlappendchild

The submenu fails to open when a scrollbar is added to the menu

We have a wide variety of options on our menu, so we've added a scrollbar to make it easier to navigate. However, the sub-menus aren't expanding as they should because of the scrollbar. <div id="navbar3" class="navbar-collapse collapse"> ...

htmlcssdrop-down-menubootstrap-4scrollbar