Footer being overridden by div element

I am dealing with a div and a footer. The sole purpose of my div is to display error messages. However, whenever the div receives a list of errors, it ends up covering the footer.

I attempted to make the footer "relative", but unfortunately, it appears in the middle of the screen instead of staying at the bottom where I need it to be.

Does anyone have any suggestions on how to make the footer responsive or offer another solution so that it doesn't disappear off the screen?

.box-errors {
overflow: auto;
min-height: 100px;
}

.footer {
position: absolute;
bottom: 0;
width: 100%;
height: auto;
line-height: 58px;
background-color: #000;
color: #ffffffc4;
font-size: 12px;
text-align: center;
}

Note: The footer is black while the div is red.

htmlcssangularresponsive

Answer №1

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11;
  width: 100%;
  height: auto;
  line-height: 58px;
  background-color: #000;
  color: #ffffffc4;
  font-size: 12px;
  text-align: center;
}

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

Two adjacent iframes, where the first one serves as a sidebar containing hyperlinks that, when clicked, will display the corresponding content within the second

Closed. This question is opinion-based. It is not currently accepting answers. Lo ...

javascripthtmliframe

The React canvas within a CSS grid is not taking up the entire space

I'm currently developing a line plotter in React. This "line plotter" needs to be contained within a CSS grid item. I am utilizing the <canvas> element to draw the lines, but I'm unsure if this is the best approach. Is there a more efficien ...

javascripthtmlcssreactjscanvas

Is there a way to incorporate multiple dynamic classes in CSS modules react?

I have integrated CSS Modules import style from "./styles/question.module.css"; // status[0] can range from 0 to 4 <p className={style[`difficulty_${status[0]}`]}>{difficulty}</p>, The code above is functional, however the following ...

cssreactjsnext.jscss-modules

Positioning the Submenu in Elementor Site

I've been working on creating a vertical navigation menu with a horizontal submenu for my website using Elementor. While I've made some progress, I'm struggling to position the submenu correctly. My goal is to have the submenu display next t ...

htmlcsselementor

Can a website be created to cater to all screen resolutions, from mobile devices to PCs?

Is it possible to create a website that is flexible and can stretch like elastic rubber, accommodating text, images, videos, JavaScript, and accessible from all web-enabled devices? I envision setting a maximum width of 980px for the site, allowing for a ...

javascriptcssxhtml

Dynamic gallery with customizable features (HTML/CSS)

Seeking guidance on creating a seamless html/css gallery without any spacing between each gallery element. All elements are identical in size, housed as list items within a ul inside a div. Media queries have been established to adjust site and image siz ...

htmlcssgalleryanimated

Contrast between SimpleChange and SimpleChanges

I'm confused about the two terms in Angular 5, SimpleChange and SimpleChanges. Can someone please help explain them to me more clearly than what's in the official documentation? ...

angularangular5

Stop SVG Image Caching in Angular

I encountered an issue while attempting to dynamically load an image in Angular without caching. The error I saw in the console was: ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous v ...

angular

Displaying a component within an ngFor loop

During my iteration over an array of objects, I encountered a situation where I needed to specify a component to load within the object. For instance, one of the items in the loop looks like: { label: 'Patient\'s Weight', subtitle ...

angular

Interactive Bootstrap Card with Popover Effect on Mouse Hover

Let's say I have a Button that contains the popover data toggle: <button type="button" class="btn btn-primary" data-toggle="popover" title="User Info">Popover with Title</button> Here is the JS code ...

cssbootstrap-4popover

Placing a div with 100% height inside a table-cell div in Firefox and IE

Seeking guidance on placing a div with 100% height inside a table-cell div. Attempted giving display:inline-block; width:100%;height:100%; to the div, successful in Chrome but facing issues in Mozilla and IE. Fiddle link: http://jsfiddle.net/kQM74/2/ HTM ...

htmlcssinternet-explorerfirefox

Create a canvas that extends the width and height of its parent container

Looking to create a rectangular canvas that acts as a progress bar, but struggling with setting the width and height to 100%. It doesn't seem to fill the parent container properly. Check out this example below: http://jsfiddle.net/PQS3A/ Is it fea ...

javascriptcsshtmlcanvas

What is the best way to access event.target as an object in Angular 2?

Apologies for my limited English proficiency. . I am trying to write code that will call myFunction() when the user clicks anywhere except on an element with the class .do-not-click-here. Here is the code I have written: document.addEventListener(' ...

javascriptangulartypescript

Eliminate item from nested array when the array is devoid of elements in Typescript

If the nested array is empty and I want to remove the object, how can I achieve this? For example, consider the following array: pokemonGroups = [ { name: 'Grass', pokemon: [ 'bulbasaur-0', 'Bulbasaur' ...

arraysangulartypescript

Tips for aligning an input field alongside a button using CSS and HTML

.wrapper { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background-color: blueviolet; } .welcome_text { width: 500px; } .welcome_form input, .welcome_form button { display: block; width: 100% ...

htmlcss

Difficulty with setting up a basic Angular 5 environment

I am facing difficulties in setting up and running Angular5 on my system. Here are the steps I followed in my home directory: $ sudo npm install @angular/cli -g $ ng new my-verbsandvocab $ cd my-verbsandvocab $ ng serve However, I encountered an erro ...

angularnpmangular-cli

FileReader and Socket.io uploader: each new upload builds upon the previous uploads

I have been working on integrating a file uploader using html5, js, and node which uploads large files in chunks. Everything works perfectly for a single upload. However, when attempting to upload again on the same page, it gets stuck in an endless loop wh ...

javascriptjqueryhtmlnode.jsfilereader

Is there a way to maintain formdata between components in Angular?

With only the tools of @Input, @Output, routing, and activatedRoute at my disposal, I set out to create a dynamic application. In this project, there are two crucial components: addbook and showbook. The addbook component features a form with a submit bu ...

javascriptangulartypescript

Using TypeScript for raw HTML manipulation

Is there a way to apply unique styles for different lines within a dynamically bound paragraph in TypeScript? I attempted to split the string variable by line, but encountered tags in my variable. Can someone suggest a method using raw HTML in TypeScript ...

angulartypescript

I am selecting specific items from a list to display only 4 on my webpage

I am trying to display items from a list but I only want to show 4 out of the 5 available items. Additionally, whenever a new item is added, I want it to appear first on the list, with the older items following behind while excluding the fifth item. Despi ...

javascriptjqueryhtml