"Created a persistent fullscreen overlay over the body content, complete with scroll bars

Can a fixed fullscreen division 

position:fixed; width:100%; height:100%;
cover the entire body of a page, including scroll bars?

I understand that setting the body to overflow:hidden; can achieve this, but I am facing an issue where I want the fullscreen division to fade in while maintaining its width without being affected by changes in the body's overflow property.

Feel free to check out this demo. Note how altering the body's overflow impacts the width of the fixed division: http://jsfiddle.net/bk63qejf/

htmlcss

Answer №1

If I am interpreting your question correctly, all you need to do is include a position fixed in both your body and html tags. Take a look at the CSS code provided below:

html, body { margin:0; padding:0; width: 100%; height: 100%; position:fixed;}
#fullscreen{ position: fixed; width: 100%; height: 100%; background-color: gray; color:white; word-break: break-all; overflow:auto;}

I hope this solution proves to be useful for you :-)

Answer №2

I appreciate all the feedback on my post. With your help, I was able to come up with a solution.

The key is to set the scrollable content to position fixed and include 

width:100%; height:100%; position:fixed; overflow:auto;
.

Check out the working demo here

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

What is the best way to convert an Angular object into a string using a for-loop and display it using $sce in AngularJS?

Currently, I am rendering a block of HTML and directives using $sce.trustAsHtml. To achieve this, I utilized a directive called compile-template which enables the use of ng-directives like ng-click and ng-disabled. While it is possible for me to pass sta ...

javascriptjqueryhtmlangularjsfor-loop

Retrieve the website address from a string of HTML code

I'm struggling to extract the URL from a given String that contains an HTTP response with an HREF tag. I've managed to identify the start of the links, but I need to stop the string as soon as the HREF tag ends. How can I accomplish this? public ...

javahtmlhtml-parsing

Extra space within table in Firefox

Experiencing an issue with excess whitespace in a table on Firefox. Visit the live example at The problem can also be seen on this jsFiddle: http://jsfiddle.net/DVbCC/ In Chrome and Safari, rows are neatly arranged with minimal spacing, but Firefox show ...

htmlcssfirefoxhtml-table

The scroll bar will be automatically reset once the content inside is updated by using the $selector.html() function

I am looking to create a dynamic scrollable content feature. Initially, I retrieve the data and set the content as follows: $("#sub_menu li").on("click", function () { $("#gallery").html(get_html($(this).attr("id"))); $("#gallery").cs ...

javascriptjqueryhtmlcss

Eliminate the initial item in each list item

I am trying to delete the first element inside each li element, but my current code only removes the a element from the first li and not all li elements. For example: This is what I have: <ul class="myclass"> <li class="product-category produc ...

htmljquery

Enlarging an image on canvas and creating a repeating pattern

My canvas size is 500px x 500px. I have a png image that matches the canvas size, which you can view here. I am looking to resize the image to 100px x 100px and then use it as part of a repeat pattern on the canvas. This is how I achieve this: // First d ...

javascripthtmlcanvas

Retrieving fresh CSS data from earlier animated elements within a Greensock timeline

In my code, I am using a TimelineLite() to perform a series of sequential tweens with .to(). What I want to achieve is accessing the output value from one of the early tweens in order to use it for constructing later tweens. Is there any way to retrieve t ...

javascriptjquerycssanimationgsap

Printing from a Windows computer may sometimes result in a blank page

Looking to incorporate a print button into an HTML page, I'm facing an issue. The majority of the content on the page should not be included in the printed version, so my approach involves hiding everything in print and then showing only the designate ...

javascriptcssprinting

Adjust the height of each child element to be half of the fixed height of the parent

There is a wrapper containing multiple boxes generated using ng-repeat from a list. The wrapper has a fixed height of 300px. If the list contains only one box, a class is added to fill the entire space of the wrapper. However, when there are more than on ...

htmlcssangularjsflexbox

Fluid centering of DIV content both vertically and horizontally

Check out this example: When dealing with fluid divs, line height won't work as expected. My current code relies on line-height which doesn't work when the box sizes change. How can I ensure that a link (content) always appears perfectly centere ...

htmlcssxhtmlmarginfluid-layout

Stretch element to reach the edge of the container

I need help with positioning an input and a textarea inside a container that has a height of 52.5vh. I want the textarea to start right below the input and expand all the way to the end of the container. How can I achieve this layout? Both elements should ...

htmlcss

What is the best way to show a div after successfully sending a post value using AJAX?

How do I show this specific div after a successful AJAX post? This is what I want to display: <div class="love" id="love_0" style="border-radius: 3px; padding: 8px; border: 1px solid #ccc; right: 13px; background: #fff; top: 13px;"> <a class ...

javascriptjqueryhtmlcssajax

Troubleshooting problems with a JavaScript game that involves guessing numbers

I have been given a challenging Javascript assignment that involves using loops to create a counting betting game. The concept is simple: the User inputs a number, and the computer randomly selects a number between 1 and 10. The User can then bet up to 10 ...

javascripthtml

Mobile devices not displaying background images correctly

My Wordpress website has a section with the code below, but the image is not adjusting properly on mobile phones. Can you provide some advice? .one_half_bg { width: 50%; float: left; background-position: 50% 50% !important; backgroun ...

wordpresscss

Expand Navigation Bar upon Hover

My goal is to recreate a Navigation Bar similar to the one found on this website: I want the Navigation Block to expand and show Menu Items when hovered over, just like the example on the website mentioned above. I've attempted to use Bootstrap and ...

jqueryhtmlcsstwitter-bootstrap

Assigning numerical ratings to a web-based questionnaire in HTML

In my questionnaire, I have radio buttons and checkboxes that need to be graded. The format of the input elements looks like this: <input type="radio" name="1" value="Yes" onclick="document.getElementById('pls').setAttribute('requi ...

javascriptphphtml

I'm trying to create a transparent v-card, but for some reason it's not turning out the way I want

How can I make the v-card transparent while keeping its content opaque using CSS? card.vue <v-card class="cardColor"> <v-card-text> TEXT </v-card-text> <v-card-actions> <v-btn color="prima ...

javascriptcssvue.jsvuetify.js

Strategies for quickly landing in top Google search results

I run a website for classified ads... Whenever users post a new ad, it gets automatically included in our dynamic sitemap (xml). Our sitemaps were submitted to Google via Webmaster Tools about two months ago. While some of the ads are indexed, it is tak ...

phphtmlxmlsearchseo

Optimal approach for reutilizing Javascript functions

After creating a simple quiz question using jQuery, involving show/hide, addClass, and tracking attempts, I am now considering how to replicate the same code for multiple questions. Would it be best practice to modify all variables in both HTML and jQuery, ...

javascriptjqueryhtmlcsslayout

Adjusting the content of a span causes the parent element to shift to the left

I'm having trouble finding a solution to a specific issue that seems to be only affecting Chrome. Whenever I try to replace the text in a span element, it causes the parent anchor to shift left. You can see a demonstration of this problem here: http:/ ...

htmlcssgoogle-chrome