Ensure that the footer is always positioned at the bottom of the page according

Question

Ensure that the footer is always positioned at the bottom of the page according

I've been struggling to get my footer to stay at the bottom of the page based on content. I've tried several CSS techniques and strategies, but I'm still encountering one issue.

footer {
    width: 100%;
    padding: 25px 0 25px;
    background: #1e1e1c;
    position: absolute;
    bottom: 0;
}
body, html {
    font-family: 'sairaregular';
    font-size: 100%;
    margin:0;
    padding:0;
    height:100%;
}

When I apply this CSS for some content pages, it looks like they are located at the bottom. You can see an example here: https://i.sstatic.net/ShJ7B.png.

However, it's not truly at the end of the page; it just appears at the bottom when the page opens. Can anyone suggest a solution to fix this issue? Thank you in advance.

html css angular twitter-bootstrap-3

Answer 1

Answer №1

Give this a try:

body{
  margin:0;
}

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

#footer {
  color: white;
  background-color: black;
  position: absolute;
  bottom: 0;
  height: 40px;
  width: 100%;
}

#content-wrap {
  padding-bottom: 40px;
}

 <div id="page-container">
    <header>
      Content for the header
    </header>
    <div id="content-wrap">
      Main content area
      <footer id="footer">
        Footer content goes here
      </footer>
    </div>
  </div>

Answer 2

Give this a try:

body{
  margin:0;
}

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

#footer {
  color: white;
  background-color: black;
  position: absolute;
  bottom: 0;
  height: 40px;
  width: 100%;
}

#content-wrap {
  padding-bottom: 40px;
}

 <div id="page-container">
    <header>
      Content for the header
    </header>
    <div id="content-wrap">
      Main content area
      <footer id="footer">
        Footer content goes here
      </footer>
    </div>
  </div>

Answer 3

Answer №2

To achieve the desired layout, you can utilize the flex property for the parent div and specify a height property.

Here is the HTML markup -

<body>
  <div id="page-container">
    <div id="content-wrap">

    </div>
    <footer id="footer">

    </footer>
  </div>
</body>

And these are the necessary CSS properties -

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}

#page-container{
  display:flex;
  flex-direction: column;
  height: 100vh;

}

#footer{
  padding: 20px;
  background: #DDD;
  margin-top:auto;
}

You can view an example of this implementation in action by visiting this link.

In the html section provided, try uncommenting the p tags to observe how the layout behaves when the content exceeds the visible page boundaries.

Answer 4

To achieve the desired layout, you can utilize the flex property for the parent div and specify a height property.

Here is the HTML markup -

<body>
  <div id="page-container">
    <div id="content-wrap">

    </div>
    <footer id="footer">

    </footer>
  </div>
</body>

And these are the necessary CSS properties -

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}

#page-container{
  display:flex;
  flex-direction: column;
  height: 100vh;

}

#footer{
  padding: 20px;
  background: #DDD;
  margin-top:auto;
}

You can view an example of this implementation in action by visiting this link.

In the html section provided, try uncommenting the p tags to observe how the layout behaves when the content exceeds the visible page boundaries.

Ensure that the footer is always positioned at the bottom of the page according

Answer №1

Answer №2

Similar questions

What can I do to prevent my background images from overlapping each other?

Does the flex-grow property depend on the flex-basis in flexbox?

CSS- The ultimate guide to perfectly centering a webpage without the need for extra margins!

I am having trouble with the vertical alignment in the middle

Encountered a problem while constructing Angular application with agm-spiderfier

Set the style of the mat-select element

Adding a background color to the body of your PHP and HTML email template is a simple way to enhance

Bringing in Angular Material on Stackblitz

CSS Background Image Properties

Displaying and hiding the top menu when the div is scrolled

An Iframe lacks the ability to showcase HTML content, unlike a browser which is capable of doing

Updating Button Text Upon Click

Make the bootstrap row stretch beyond the confines of the container

The function of modal in JavaScript is not working properly

Using Firebase Data in Angular5 Component with MathJax Integration

What is the reason behind Bootstrap 5 inserting a line break following a span element?

Step-by-step guide on accessing values from a JavaScript object

Displaying image issues persist on Safari browsers for Mac and iPhone

Showcasing a Collection of Dropdown Options for All Angular Material Icons in Angular Versions 2 and Above

Enhancing image clips using jQuery techniques