The alignment of the footer component

Question

The alignment of the footer component

Hey there! I've created a fiddle to demonstrate the issue I'm facing: https://jsfiddle.net/8a1qgodv/

In my design, the page-footer element is positioned absolutely at the bottom with 0px. However, when the height of the device is less than 730px, the footer ends up covering the page-body element.

I experimented without using absolute positioning, but then on a Galaxy S5 device, the page-footer doesn't stick to the bottom properly. There's always a small white space (around 20px) between the footer and the bottom edge.

Could you please share some tips or hints on how I can resolve this dilemma?

This is how the HTML structure looks like:

<div class="site-wrapper">
        <div class="container">
            <div class="page-header">
                <img class="img-responsive" src="http://www.smoshmosh.com/images/startseite_logo.png"/>
            </div>
            <div class="page-body indexPageBody">
                <img class="img-responsive" src="http://www.smoshmosh.com/images/startseite_content.png"/>
                <div class="startButton">
                    <a id="startButton" href="dummyUrl"><img id="startButtonImg" class="img-responsive" src="http://www.smoshmosh.com/images/start_button.gif"/></a>
                </div>
            </div>
            <div class="page-footer">
                <img class="img-responsive" id="startseiteFooter" src="http://www.smoshmosh.com/images/startseite_footer.png"/>
                <button id="audioToggleButton" class="startAudio"><img id="musicImage" class="img-responsive" src="http://www.smoshmosh.com/images/music_on.png"/></button>
            </div>
        </div>
    </div>

html twitter-bootstrap css twitter-bootstrap-3

Answer 1

Answer №1

In order to keep the footer at the bottom of the page, you need to adjust the CSS in the following way:

.page-footer {
    max-width: 500px;
    /*position: absolute;*/ // If you were using absolute positioning, remove it 
    bottom: 0;
}

Make sure to assign a specific height to each 'div' to prevent them from overlapping.

For reference, here's an example: https://jsfiddle.net/8a1qgodv/2/

Answer 2

In order to keep the footer at the bottom of the page, you need to adjust the CSS in the following way:

.page-footer {
    max-width: 500px;
    /*position: absolute;*/ // If you were using absolute positioning, remove it 
    bottom: 0;
}

Make sure to assign a specific height to each 'div' to prevent them from overlapping.

For reference, here's an example: https://jsfiddle.net/8a1qgodv/2/

Answer 3

Answer №2

Wow, this problem is a breeze to solve.

An element with absolute positioning relies heavily on the positioning of its nearest parent element that has a non-static position.

To fix the issue, you can add the following CSS rule:

.site-wrapper {
    position:relative;
}

Check out this working fiddle for reference!

I recommend reading Mr Alien's response on the SO Question. Pay close attention to Demo 3 & 4.

This provides an excellent demonstration and explanation of how absolute positioning works.

UPDATE:

Furthermore, in order to accommodate the absolute positioned footer, make sure to create padding at the bottom of the site-wrapper like so:

.site-wrapper {
    position:relative;
    padding-bottom: 230px;
}

Here's another working example to review.

Answer 4

Wow, this problem is a breeze to solve.

An element with absolute positioning relies heavily on the positioning of its nearest parent element that has a non-static position.

To fix the issue, you can add the following CSS rule:

.site-wrapper {
    position:relative;
}

Check out this working fiddle for reference!

I recommend reading Mr Alien's response on the SO Question. Pay close attention to Demo 3 & 4.

This provides an excellent demonstration and explanation of how absolute positioning works.

UPDATE:

Furthermore, in order to accommodate the absolute positioned footer, make sure to create padding at the bottom of the site-wrapper like so:

.site-wrapper {
    position:relative;
    padding-bottom: 230px;
}

Here's another working example to review.

Answer 5

Answer №3

You have the option of setting a flexible height for it.

.wrapper {
  height: auto;
}

header {
  height: 10%;
  background-color: #3498db;
}

.content {
  height: 80%;
}

footer {
  height: 10%;
  background-color: #3498db;
}

<div class=wrapper>
  <header></header>
  <div class="content"></div>
  <footer></footer>
</div>

Answer 6

You have the option of setting a flexible height for it.

.wrapper {
  height: auto;
}

header {
  height: 10%;
  background-color: #3498db;
}

.content {
  height: 80%;
}

footer {
  height: 10%;
  background-color: #3498db;
}

<div class=wrapper>
  <header></header>
  <div class="content"></div>
  <footer></footer>
</div>

The alignment of the footer component

Answer №1

Answer №2

Answer №3

Similar questions

Implement Bootstrap and Jquery in Laravel Jetstream setup

Using javascript to quickly change the background to a transparent color

Can you use both HTML and JSON in ROR?

How to Generate a Table of Contents in HTML with JavaScript and jQuery

Troubleshooting Material-UI Menus

Directing a webpage to a particular moment within that page

Guide to making a for loop using CSS custom properties and conic gradient in SCSS

Is there a way to align the arrow on the pills to the right center of the lengthy text?

Explaining the functionality of jQuery validation code

Displaying a message within a picture

Creating a polished and stylish centered responsive image with Bootstrap 3

Utilize Bootstrap 4's d-print classes to style your form

How can I include a script in a div using Javascript or Jquery?

Having an issue with retrieving value from a textfield in JavaScript

the drawer conceals the paper

Merging Angular with jQuery: Organizing jQuery into a distinct file leads to the error message 'Property 'top' cannot be read because it is undefined.'

Selecting options in combobox for each row in a table using Angular 2 programmatically

The design template is failing to be implemented on my personal server utilizing node.js

Position the typography component to the right side

tips on displaying textbox content on a php webpage