Ensure the `div` element expands to fill the entire page even when scrolling

I'm working with a div element called 'alert' that functions similarly to the javascript alert() method. However, I've noticed that it only covers the visible viewport of the page and not the entire content, which becomes uncovered as you scroll down. Is there a way to make the 'alert' div cover the whole page without using position:fixed? You can see a demo of the issue here. Thank you.

#alert{
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    background-color:rgba(187,201,247,0.5);
    z-index:3;
    text-align:center;
    font-size:20px;
}

Answer №1

Cascading Style Sheets

html,body{
    position:relative;
}

#text{
    height:1000px;
}
#alert{
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    background-color:rgba(187,201,247,0.5);
    z-index:3;
    text-align:center;
    font-size:20px;
}

View DEMO

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

Ways to prevent mouse selection in an input field without disabling or making it read-only

Imagine this scenario: <input type="text"> The task at hand is to prevent text selection within the <input> field. ...

Creating a canvas with multiple label introductions can be achieved by following these

I am looking to group labels and sublabels on the x-axis of a canvas component. Currently, I only have sublabels like: RTI_0, RTI_1... I would like to add labels to these sublabels like: RTI = {RTI_0,RTI_1,RTI_2] BB = {BB_0, BB_1,BB_2,BB_3] <div cla ...

Activate just the show more / show less button on the website that has several buttons with identical ids

Whenever the "show more" button is clicked, additional images are displayed in the gallery and the button text changes to "show less". However, in my ExpressionEngine (CMS) templates and entries, all "show more" buttons share the same id, causing other but ...

My goal is to design a dynamic textbox for a website that allows users to customize the text in any format they desire

I want to create a versatile textbox on my website that allows users to change the text format as they desire. Unfortunately, I am facing some issues with implementing this feature. Here is the code I have developed so far. <body> <h1>< ...

Scala Play templating with vararg HtmlContent allows for dynamic generation of

I have a standard template in play 2.6, where I need to pass in a variable number of HtmlContents. The template is defined like this (including the implicit parameter): @(foo: String)(content: Html*)(implicit bar: Bar) When working with the template, I c ...

How can I combine an onkeypress and onclick event listener in one method?

I have two inquiries, somewhat intertwined. 1) Is it feasible to merge the 2 functions below into a more efficient function, or do I need to create a function and then call it in both event listeners? input.addEventListener("keyup", () => { if (eve ...

Tips for updating the CSS properties of the "html" element

html { width:100%; } Looking to dynamically update the CSS of the html tag upon button click using JavaScript. The goal is to modify the existing HTML CSS code as shown below, but achieving this dynamically with a script. Is it possible? html { w ...

Artistically connect the main navigation bar to the secondary one

I am currently working on developing a responsive website. I am following the "content first" methodology, starting with designing for the smallest mobile layout. The homepage of the site (still under construction) looks something like this: When a user c ...

The canvas could not be loaded properly in THREE.Texture()

I'm having trouble with adding an image onto the side of a cube that I'm creating. The image loads onto the canvas, but I'm struggling to incorporate it into the texture. function createPictureCanvas(text, font, foreground, background, xres ...

Creating stylish horizontal stripes in a table using CSS

I've been attempting to assign a unique color to every nth row, but my efforts with the :nth-child property are affecting columns instead of rows. Despite trying various solutions and scouring the internet for answers, I have yet to find a successful ...

Is it better to let the old flash message fade away before introducing the new one?

I'm a beginner when it comes to jQuery. I have a form that calculates and displays the result in a flash message. My desired behavior is as follows: When the form is submitted for the first time, the flash message with the results should fade in. For ...

Nginx fails to load CSS in Asp.net Core on Raspberry Pi

First and foremost, thank you for taking the time to read my post. Secondly, I apologize for any language errors in advance. I am currently attempting to run an Asp.net core application on a Raspberry Pi, but I am encountering difficulties with nginx prox ...

Using JavaScript to ensure that a div is not hidden on page load if a checkbox is unchecked

Upon inspecting a page, I am implementing a script to check if a checkbox is selected. If not selected, the goal is to hide a specific div element. While troubleshooting this issue, I suspect the problem may be due to the lack of an inline element within t ...

The default file type for a new file in Sublime Text 2

While searching through the questions and answers, I noticed that none of them quite matched what I was looking for. Each time I open a new file, it automatically defaults to a plain text file. Since I primarily work with HTML files, I was wondering if the ...

Fade Effect on Bootstrap Icons

Is there a way to show the filled version of a bootstrap icon when hovering over it? Here is the code I have: <svg width="80px" height="80px" viewBox="0 0 16 16" class="bi bi-cloud-plus" fill="#5cb ...

The display attribute is malfunctioning in Internet Explorer when trying to style Font Awesome icons

When viewed in IE 11 with CSS properties applied After disabling the display property, the result changes as shown below In the first screenshot, the icon is present but not visible. I want to keep the display:table-cell property for responsiveness. Can ...

The bootstrap link transforms into a standard button

My hyperlink stops working when I include Bootstrap code, transforming into a standard button. Here's the code in question: <!DOCTYPE html> <html lang="" dir="ltr"> <head> <link rel="stylesheet" ...

Exploring the true column widths in Bootstrap 4 tables

I have been attempting to create a layout similar to this in Bootstrap 4, where the table columns are set in pixels with fixed values, causing a horizontal scroll within the card. However, I am facing issues as the columns do not have the desired sizes. Th ...

Is it possible to adjust the scroll top position using inline style in angularJS/CSS?

I am working on storing the scrollTop value of a vertical menu in my controller so that I can set it up each time I return to the page for persistent scrolling. Does anyone know how I can achieve this? This is the code snippet I am currently using: < ...

Border around the viewport of an IE document

There seems to be a thin 2px border surrounding the document viewport in some versions of Internet Explorer. This issue is not present in other browsers, making it challenging to calculate mouse positions accurately for the page and client areas. Initially ...