The footer moves upwards when a file is downloaded

I am facing an issue with my website footer and its CSS styling.

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height:8rem;
}

The main goal is to keep the footer at the bottom of the page, regardless of the amount of content on the page.

However, I have observed that when a file is downloaded from the page, the download bar at the bottom of the browser pushes the footer upwards. This problem seems to be specific to Chrome. Is there a way to prevent this behavior?

<div id="page-container">
    <div id="footer">
</div>

#page-container {
    position: relative;
    min-height: 100vh
}

Answer №1

In the case of Chrome, the download bar is not included in the viewport, making it impossible to prevent its appearance.

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

Error: Angular version 5.1.0 is unable to set the header content-type to application/json for HttpClient

I have been attempting to customize the header for a POST API request to be of content type application.json. let options: { headers?: {'Content-Type':'application/json'} } Unfortunately, this customization is not being successfully a ...

Can we define a style or CSS for one element depending on the characteristics of another element?

One challenge I'm facing involves a 3rd party library (fullcalendar) that automatically sets the height of elements based on internal calculations to ensure they look good in any viewport: <div style="height: 72px;"> Unfortunately, not all ele ...

Launching an Ionic 2 app with Angular 2 from a different native application

We are currently in the process of developing an application using a mobile framework called MAF. Additionally, we have another app which was built using Angular 2/Ionic 2. Our goal is to launch this Angular2/Ionic2 app from within the MAF-built app. For ...

Tips on utilizing jquery slideDown alongside appendTo

I am currently utilizing an ajax request to retrieve records from the database and then appending the data in HTML. However, I want the HTML to slide down once the data has been appended, but I'm unsure of how to achieve this. Below is the ajax metho ...

issue with uploading files in angular 7

Currently, I am facing an issue with Angular 7 where the input type "file" is not working as expected. However, in Angular 6, everything works fine. When submitting the input file type data in Angular 6, I receive a field list like this: https://i.sstat ...

What is the ternary operation syntax for setting the img src attribute in Angular 8?

My data includes a property called "photo" which can either have a file name or be empty. For instance, it could be "steve.jpg" or just an empty string if Steve does not have a photo. In React JSX, I know how to use a ternary operator with the "photo" va ...

Scrolling and hovering now triggers the fixed button to toggle class seamlessly

Currently, I am attempting to modify the class of a button on my website. The initial state of the button is wide, but as the user scrolls, it should shrink in size. When hovering over the shrunken button, it should expand back to its original width. Alt ...

in comparison to the base directory in ASP.NET

When using "/", it refers to the root directory. This can be seen in code like: <link href="/Styles/Order.css" rel="stylesheet" /> This specifies a file path that is relative to the root directory. However, when dealing with server controls, you m ...

Trouble arises when applying CSS to ng-x accordion styling

While working with ng-x accordion in Angular 2, I successfully rendered my accordion component. However, I encountered an issue when trying to add styles to the template provided by ng-x accordion. Despite using CSS in my rendered component for classes l ...

Updating CSS for dropdown menu in Fluent/Fabric design

I am working with a dropdown component from Fluent UI and I am trying to customize the CSS of the dropdown options. Although I can add classes using className to the dropdown itself, I am facing difficulty in styling the dropdown options directly due to th ...

Instructions on converting text to a Float value and displaying the calculated result in a separate div

I am attempting to extract a string from a div, clear its content, then retrieve the actual price from ".skuBestPrice", remove any special characters, perform calculations to convert it into a floating point number, and display this number in the div ".tot ...

Giving identification to a pair of elements located within the same column

Struggling with assigning IDs to two elements in a single column - a dropdown and a text element. Managed it in the first scenario, but encountering issues in the second one. Seeking assistance on this matter. Scenario 1: <td> <sele ...

Tips on eliminating expansion upon button click in header within an Angular application

While utilizing Angular Materials, I encountered a challenge with the mat-expansion component. Every time I click on the buttons within the expansion panel, it closes due to the default behavior of mat-panel. Requirement - The panel should remain expanded ...

Optimal method for efficiently caching data when toggling between list view and detail view within Angular 12

In my Angular App, I have implemented two components - a list view and a details view. Users can switch between these components, both of which utilize multiple async pipes. To minimize the number of http requests to the backend, I decided to cache data u ...

Guide on converting a JSON containing nested JSONs into an HTML table

Currently, I am working with a JSON data structure that contains nested dictionaries. My goal is to create an HTML table where each top-level key serves as a column in the table. The inner key-value pairs should be represented as a single text within cells ...

The property 'toLowerCase' cannot be accessed as it is undefined or null

Scenario: A textbox is present with a list of data below it. Upon typing in the textbox, the list gets filtered based on the text entered. Code: Pipe: @Pipe({ name: 'search' }) export class SearchPipe implements PipeTransform { transform( ...

Node for Angular forms workflow

I'm on the hunt for workflow nodes with forms that open when the user clicks on them. While I've come across a few options, not all of them are open source. Can you point me towards some open source (simple and basic) alternatives? Here's w ...

Is it possible to vertically displace an element within a CSS Grid cell?

Here is the code snippet: .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); ...

Guide to setting a default value in a asynchronous list within an ng-select (Angular 2+, ng-select, and rxjs)

I recently started using ng-select and incorporated the typeahead feature to fetch server data as the user types. This is how I implemented it: I created an observable for the list of agents which gets updated whenever a new string is inserted agents$: Ob ...

Directories within directories - HTML base directories & subdirectories

Within my HTML, I have included the following code: <head> <base href="http://mydomain.com/dev/"> </head> Despite this base element setting, all of my links seem to be pointing to mydomain.com/ instead of the expected subfolder /dev/. ...