Footer στο κάτω μέρος

sinikos · 3 Δεκεμβρίου 2020

Καλησπέρα. Έχω ένα footer σε μια σελίδα που χρησιμοποιώ bootstrap4 και θέλω το footer να είναι στο κάτω μέρος. Αν είναι μικρή η σελίδα να είναι sticky στο κάτω μέρος. Αν είναι μεγάλη, να εμφανίζεται στο τέλος με το scroll.

Δοκίμασα position: absolute; bottom: 0; και εμφανίζεται στο κάτω μέρος είτε η σελίδα είναι μικρή, είτε μεγάλη. Επίσης αν είναι μεγάλη, τότε στο scrol ανεβάινει το footer προς τα πάνω.
Δοκίμασα την κλάση fixed-bottom, δουλέυει μια χαρά στις μικρές σελίδες αλλά στις μεγάλες είναι ορατό συνέχεια.

*Επειδή τώρα στο τέλος παρατήρησα πόσο σπαστικό είναι το μικρές σελίδες και μεγάλες που λέω συνέχεια, εννοώ αυτές που έχουν λίγο κείμενο και δεν καλύπτουν το height της οθόνης και οι άλλες που έχουν πολύ κείμενο και θέλουν scroll.

Επεξ/σία 3 Δεκεμβρίου 2020 από sinikos

Jordan95 · 3 Δεκεμβρίου 2020

Μήπως εννοείς αυτό;

https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/

Επεξ/σία 3 Δεκεμβρίου 2020 από Jordan95

elvizakos · 3 Δεκεμβρίου 2020

Δες αυτό το παράδειγμα και προσάρμοσε ανάλογα το περιεχόμενο στο div (μεγάλωσέ το για να δεις πως συμπεριφέρεται). Δεν έχω δοκιμάσει πως δουλεύει με bootstrap.

<!DOCTYPE html>
<html lang="en" dir="ltr" >
	<head>
		<meta charset="UTF-8" />
		<title>height test 1</title>

		<style>
body {
	display: flex;
	height: 100vh;
	flex-direction: column;
	margin: 0;
}

footer {
	margin-top: auto;
	height:100px;
	min-height:100px;
	background-color: red;
}
      </style>

	</head>

	<body>
		<div>
			This is a web page with height &lt; 100%.<br />
			This is a web page with height &lt; 100%.<br />
			-----------------------------------------------
		</div>

		<footer>This is the footer</footer>
	</body>
</html>

Δες για υποστήριξη σε browsers και περισσότερες πληροφορίες:

vngls7 · 6 Δεκεμβρίου 2020

Νομίζω ο ευκολότερος τρόπος να το λύσεις είναι με κάποιο jQuery που θα ελέγχει το ύψος του browser σε κάθε οθόνη. Λογικά ένας έλεγχος στις παρακάτω συναρτήσεις θα σου κάνει:

$(window).height()

$(document).height()

Με 2 if μεταξύ τους και χρήση css σε κάθε μία από τις 2 περιπτώσεις θα είσαι οκ για όλα τα μεγέθη οθονών.

papmel · 7 Δεκεμβρίου 2020

13 ώρες πριν, vngls7 είπε
Νομίζω ο ευκολότερος τρόπος να το λύσεις είναι με κάποιο jQuery που θα ελέγχει το ύψος του browser σε κάθε οθόνη. Λογικά ένας έλεγχος στις παρακάτω συναρτήσεις θα σου κάνει:
$(window).height()
$(document).height()
Με 2 if μεταξύ τους και χρήση css σε κάθε μία από τις 2 περιπτώσεις θα είσαι οκ για όλα τα μεγέθη οθονών.

και ενα eventlistener στο Onresize

Σύνδεση

Footer στο κάτω μέρος

Προτεινόμενες αναρτήσεις

sinikos

Jordan95

elvizakos

vngls7

papmel

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση