The place for more technical questions for those who want to create new pagetypes or bespoke functionality.

Position footer at foot of the page in Bootstrap

Neil Pollock
Auteur du sujet
Hors Ligne
Membre premium

Plus d'informations

il y a 9 ans 9 mois #4089 par Neil Pollock

Position footer at foot of the page in Bootstrap a été créé par Neil Pollock

Is there any way of positioning the footer at the actual foot of the page in Bootstrap template?

Where there is only a small amount of text on a page the footer is positioned immediately under the section, and not at the actual foot of the page.

Here is a basic illustration of the problem: xerte.cardiff.ac.uk/play_4414

I've tried a few different things, but everything seems to fail due to the <body> element not automatically filling the available screen.

Connexion ou Créer un compte pour participer à la conversation.

ronm
Hors Ligne
Administrateur

Plus d'informations

il y a 9 ans 9 mois #4092 par ronm

Réponse de ronm sur le sujet Position footer at foot of the page in Bootstrap

Try:

Code:

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/

Connexion ou Créer un compte pour participer à la conversation.

Neil Pollock
Auteur du sujet
Hors Ligne
Membre premium

Plus d'informations

il y a 9 ans 9 mois #4093 par Neil Pollock

Réponse de Neil Pollock sur le sujet Position footer at foot of the page in Bootstrap

Ron Mitchell écrit: Try:

Code:

.footer { position: fixed; bottom: 0; width: 100%; }

I've tried this solution previously, but I don't really want the footer fixed to the bottom of the user's veiwport, especially when there is content that stretches beyond this viewport. It just ends up looking messy, and content can be missed.

Ideally, the footer should always appear after the page content (particularly if the is content is taller than the user's viewport) but it should be pushed to the bottom of the screen when there is not enough content to fill the screen.

Connexion ou Créer un compte pour participer à la conversation.

Neil Pollock
Auteur du sujet
Hors Ligne
Membre premium

Plus d'informations

il y a 9 ans 6 mois #4189 par Neil Pollock

Réponse de Neil Pollock sur le sujet Position footer at foot of the page in Bootstrap

So, I think I finally found a solution to this. Will need to test it to make sure it doesn't break anything in the layout, but it seems promising so far:

Code:

body {
	display:flex;
	flex-direction:column;
	min-height:100vh;
}
.container {
	flex: 1;
}

Connexion ou Créer un compte pour participer à la conversation.

ronm
Hors Ligne
Administrateur

Plus d'informations

il y a 9 ans 6 mois #4191 par ronm

Réponse de ronm sur le sujet Position footer at foot of the page in Bootstrap

Thanks Neil.
Just tested this and can't spot any adverse effects.
I think in most case people won't notice the problem as their pages will often have enough content for it not to matter but if there aren't any adverse affects then it will be worth us making this part of the core code.

Connexion ou Créer un compte pour participer à la conversation.

Modérateurs: JohnSmith

Temps de génération de la page : 0.184 secondes

Propulsé par Kunena

Position footer at foot of the page in Bootstrap

Main Pages

Quick Links

Support

External resources