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
Onderwerp Auteur
Offline
Premium lid

Meer

9 jaren 10 maanden geleden #4089 door Neil Pollock

Position footer at foot of the page in Bootstrap werd gestart door 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.

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

ronm
Offline
Administrator

Meer

9 jaren 10 maanden geleden #4092 door ronm

Beantwoord door ronm in topic 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/

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Neil Pollock
Onderwerp Auteur
Offline
Premium lid

Meer

9 jaren 10 maanden geleden #4093 door Neil Pollock

Beantwoord door Neil Pollock in topic Position footer at foot of the page in Bootstrap

Ron Mitchell schreef : 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.

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Neil Pollock
Onderwerp Auteur
Offline
Premium lid

Meer

9 jaren 7 maanden geleden #4189 door Neil Pollock

Beantwoord door Neil Pollock in topic 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;
}

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

ronm
Offline
Administrator

Meer

9 jaren 7 maanden geleden #4191 door ronm

Beantwoord door ronm in topic 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.

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Moderators: JohnSmith

Tijd voor maken pagina: 0.135 seconden

Gemaakt door Kunena

Position footer at foot of the page in Bootstrap

Main Pages

Quick Links

Support

External resources