Getting background and border to overflow in CSS: A step-by-step guide

On my website, I have implemented fixed top and bottom sections using CSS with position: fixed;

Within these fixed sections, there is an absolutely positioned div element where the majority of my content is displayed. When the content exceeds the size of this element, I want scroll bars to appear on the right side of the screen (not within the element itself). To achieve this, I have applied overflow-y: scroll; to the body element, similar to how it appears on Facebook.

While this setup works well for most aspects, I encounter issues with borders and backgrounds of the page element. The content visible initially includes both border and background, but once I scroll down to view overflow content, these visual elements disappear.

I've experimented with setting the height of the page using absolute (bottom: 105px) and relative (height: 100%;) methods, without success. Additionally, I attempted to address this by ending the content inside the page element with 

<p style="clear: both"></p>
.

If anyone has suggestions or solutions for this issue, I would greatly appreciate it! Thank you!

css

Answer №1

The issue likely stems from using height: 100%;. When the background-color fills in, it extends to 100% of the visible area. However, since the overflow exceeds this limit, the background color is not retained.

To resolve this, replace height: 100% with a min-height set to the desired value for your absolutely positioned element. This ensures that when the background-color fills in, it encompasses the entire element due to the continuous overflow above the specified minimum height.

EDIT: Recognizing the need for brevity in an answer:

You originally had:

.middle {height:100%;}

Delete the above and use:

.middle {min-height:100%;}

Answer №2

Uncertain about your border preferences, here are two different options:

Option 1: Borders at Top and Bottom Only

<div class="top">Top</div>
<div class="middle">
  <div class="content"></div>
</div>
<div class="bottom">Bottom</div>

CSS

.top,
.bottom {
  position: fixed;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  background-color: red;
  z-index: 1;
}

.bottom {
  bottom: 0;
  top: auto;
  background-color: blue;
}

.middle {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 100px;
}

.content {
  width: 100%;
  height: 1000px;
  background-color: yellow;
  border: 10px solid black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 100px;
}

Option 2: Solid Border Around Entire Content

<div class="top">Top</div>
<div class="middle">
  <div class="content"></div>
</div>
<div class="bottom">Bottom</div>

CSS

.top,
.bottom {
  position: fixed;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  background-color: red;
  border-bottom: 10px solid black;
  z-index: 1;
}

.bottom {
  bottom: 0;
  top: auto;
  background-color: blue;
  border-top: 10px solid black;
  border-bottom: 0;
}

.middle {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  bottom: 110px;
}

.content {
  width: 100%;
  height: 1000px;
  background-color: yellow;
  border-right: 10px solid black;
  border-left: 10px solid black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 110px;
}

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

Steps for layering three images with distinct red, green, and blue components using HTML and CSS

Is it possible to overlay three versions of an image, each with red, green, and blue components, in order to recreate the original image using only HTML and CSS? I have tried this HTML setup: <div id="container"> <img class="color" id="red" ...

htmlcsscolors

In a material UI select/menu item component, how can text be wrapped to the next line? (CSS challenge)

I am currently working on displaying a school's canceled classes in a select menu, organized by the day: https://i.sstatic.net/uCikq.png However, I have run into an issue where the overflow text is being cut off in my menu when viewed at a mobile res ...

cssreactjsmaterial-uistyling

I'm having trouble with certain JavaScript functions on my website - some are working fine, but others aren't. Any suggestions on what I should do

I just finished developing a calculator using HTML, CSS, and Javascript. It works flawlessly for all numbers 1 through 9 and the operators +, -, *, /, and %. However, I am facing issues with the number 0, C, and = buttons not functioning properly. Upon in ...

javascripthtmlcsserror-handling

Ensuring Padding and Border Enhancements without Disrupting the Design Structure

I have a layout featuring three columns, each with unique dimensions: Left Column: 240px; Middle Column: 360px; Right Column: 360px. The overall layout is contained within a 960px wrapper. To create this layout, I utilized float properties and inserted s ...

csslayoutbordermarginpadding

Display a button that allows the header to slide down after sliding

Currently building my website and encountering an issue. At the top of the page is my header with a navigation menu inside it. As I scroll down the page and the header moves out of view, I would like another DIV to slide down from the top (fixed in positi ...

javascriptjqueryhtmlcss

How can I ensure that my content stays fixed at the bottom of a scrolling div in Material UI React?

I have developed a React JS component using Material UI that includes a chat input feature. However, I am facing an issue where the width of the chat input is always half the screen size on desktop or mobile devices. When I try to change the width to 100%, ...

htmlcssreactjsmaterial-ui

I am experiencing a problem trying to transfer a file to the specific folder I want

I am facing an issue where I am trying to move my file to a specific folder but it seems like the file is not being moved successfully. Can someone please assist me with this problem? Provided below is the code snippet from my controller "Sms_Control ...

phphtmlcssajaxcodeigniter

Making a switch from one image to another - JavaScript

I need a solution to swap out an image that is used in multiple locations on a webpage. Consider this sample HTML page: <html> <head> </head> <body> <img id="1" src="example.com/img/1889.png"> <d ...

javascripthtmlcss

Troubleshooting Internet Explorer CSS problem with jQuery UI Datepicker

Using the jQuery UI datepicker as an event calendar has been a great experience in Firefox and Chrome. However, I have encountered issues with it not functioning correctly in IE 8 and 9. The expected behavior is for selected dates to be highlighted when v ...

jquerycssjquery-uiinternet-explorer

Bootstrap grid. Instead of moving to the next row, scroll horizontally when the content overflows

Here is the code snippet: <div class="row shochatgroup"> <div *ngFor="let message of messages" class="col-auto"> <button *ngIf="message.state.attributes.shochatpaid > 0 && message.state.at ...

csstwitter-bootstrapbootstrap-4

applying a custom background image using CSS with local storage

Seeking to incorporate a base64 image stored in local storage under the key ImgStorage into the CSS background: data:image/png;base64,iVBORw0KGgoAAAANS...... Experimented with two approaches: 1) Loading from storage and placing in CSS tag: var TheImage ...

javascriptcsscanvaslocal-storage

Creating a custom design for a button using an external CSS file

I have an HTML code linked to a CSS file where I'd like to style buttons. The button styles are defined in the CSS file. Everything else is working fine, but when I attempt to apply the styled button, it reverts back to a standard HTML button unless ...

htmlcss

What is the best way to make ng-style append to a pre-existing style?

I am facing an issue with my custom popover directive and another custom directive that uses it. I am attempting to use ng-style to adjust the width of the popover. Below is a code snippet from the directive's html template: <div my-custom-popover ...

htmlcssangularjsangularjs-directive

Customize Bootstrap modal width to suit content dimensions

Is there a way to adjust the width of the modal to fit its content without setting a fixed value? I want to avoid having a horizontal scrollbar. I attempted setting the overflow-x property but it didn't work. If possible, I'd prefer not to use jQ ...

htmlcsstwitter-bootstrap

Issue with Arabic characters displaying incorrectly in Outlook 2007

I have encountered an issue with my newsletter application where the newsletters are in Arabic. When viewed in the browser, everything looks fine. However, when opened in Outlook 2007, strange text appears instead. Interestingly, if the email is marked as ...

htmlcssemailoutlook

Looking to enhance my JavaScript skills - Codepen samples welcome!

I have incorporated this code pen in my website to create a menu button for mobile view: http://codepen.io/anon/pen/LNNaYp Unfortunately, the button sometimes breaks when clicked repeatedly, causing the 'X' state to appear even when the menu is ...

javascriptjqueryhtmlcss

Is it necessary to define all presentational images in CSS?

Lately, I've been diving into the world of (X)HTML & CSS and have come to understand that HTML is meant for structure while CSS is used for presentation. It makes me wonder if a significant portion of images on websites are more about enhancing p ...

htmlcss

What is the best way to align a div and two buttons with respect to an image within an li element?

I am trying to adjust the positioning of text on top of an image with a 40px margin. Additionally, I want to place two buttons on each side of the list item (one on the right and one on the left). Despite numerous attempts with various solutions, including ...

htmlcss

Should you stick with pre-defined styles or switch to dynamic inline style changes?

I am currently developing a custom element that displays playing cards using SVG images as the background. I want to make sure that the background image changes whenever the attributes related to the card's suit or rank are updated. From what I under ...

javascripthtmlcssweb-componentcustom-element

Managing text size in HTML email designs

How can I maintain consistent font sizes in HTML EMAILS? The fonts look great on the website, but in my email they appear small and close together. Check out Live Demo I've attached a screenshot of how the email appears to me. Any suggestions on h ...

csshtml-emailfont-size