Προς το περιεχόμενο
  • 0

HTML Layouts


Downloadpercent

Ερώτηση

Καλημέρα, πως μπορώ να κάνω το Footer να κάτσει κάτω στην οθόνη όταν πάνω από το Footer έχω κάποιο μικρό κείμενο-layout, αν αυτό που προηγείται του Footer έχει μεγάλο width τότε καλός αλλά όταν έχει μικρό width Κάνει το footer να ανεβαίνει...

 

<html>
	<link href="main.css" rel="stylesheet" type="text/css"> 
	<body>
		<div id="header">Header</div>
		<div id="navi">Navigation</div>
		<div id="sidebar">Sidebar
			<ul>
				<li><a href="#">Home</a></li>
				<li>Exit</li>
			</ul>
		</div>
		<div id="content">
			<p> Enter Content Here
		</div>
		<div id="footer">Footer</div>
	</body>
</html>

 

body
{
	width: 90%;
	margin: 0 auto;
	font-family: Calibri;
	font-size: 1.1em;
    color: #444;
}

#header
{
	background: #48577D;
	background-image: url('img1.png');
	background-repeat: inherit;
	margin-bottom: 1em;
	height: 5em;
    text-align: center;
    color:white;
}

#navi
{
	background: #48577D;
	margin-bottom: 1em;
	height: 2em;
    color:white;
}

#menu
{
    padding-top: 1em;
	width: 20%;
	height: 200px;
	float: left;
     
}

#content
{
    float: right;
	width: 74%;
    height: 400px;
	margin-bottom: 1em;
	
}

#footer
{
    clear:both;
    color:white;
    text-align: center;
    font-size: 0.8em;
    padding-top: 0.5em;
	background: #48577D;
	height: 2em;
	margin-top: 1.0em;
}

#clear
{
    clear: both;
}

 

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

13 απαντήσεις σε αυτή την ερώτηση

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

  • 0

Εξαρτάται τι εννοείς "να κάτσει κάτω".

 

Μια εύκολη λύση, μάλλον περίπου αυτή που θέλεις, είναι να βάλεις τα υπόλοιπα εκτός του footer σε ένα επιπλέον div και να του δώσεις min-height. Πολύ καλό browser support, απλό και εύκολο.

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

footer{
    position: fixed;
    bottom: 0;
    width: 100%; /* optional */
    left: 0; /* optional και αυτό */
}

.content-container{
    margin-bottom: FOOTER-HEIGHT; /* προσοχή, πρέπει να ξέρεις έστω και στο περίπου το ύψος του footer για να αποφύγεις το content overlapping! */
}

παράδειγμα δώσε προσοχή στο CSS των footer, #container

 

 

EDIT: μάλλον άλλο κατάλαβα, το θέμα σου αποτι βλέπω έχει να κάνει με το sidebar (για το οποίο δεν μας έχεις δώσει το CSS και μάλλον έχει να κάνει με το πώς είτε δεν το έκανες float, είτε δεν του έδωσες σωστή τιμή για το width του).

 

με αυτό δεν νομίζω να έχεις πλέον πρόβλημα:

#sidebar{
	float: left;
	width: 25%;
}

Αν και καλό θα ήταν να βάλεις και box-sizing: border-box; στο #sidebar και το #content

#content,
#sidebar{
    box-sizing: border-box;
}
Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Πολλοί τρόποι και το θέμα είναι τι ζητάς απο το footer ακριβώς..η all time classic τεχνική είναι με absolute positioning.

 

http://codepen.io/anon/pen/HDgrp

 

Όντως το θέμα είναι τι ζητάς από το footer ακριβώς.

 

H λύση με absolute έχει θέματα επειδή ο footer βγαίνει από το flow και καταλήγει να καλύπτει το content αν αυτό φτάνει μέχρι κάτω απο μόνο του. Μπορείς να το αποφύγεις βάζοντας padding-bottom ίσο με το ύψος του footer στο .page-wrapper, αλλά αυτό σε αναγκάζει να έχεις fixed ύψος του footer (μπορεί και να μην είναι πρόβλημα ανάλογα την περίπτωση).

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Όντως το θέμα είναι τι ζητάς από το footer ακριβώς.

 

H λύση με absolute έχει θέματα επειδή ο footer βγαίνει από το flow και καταλήγει να καλύπτει το content αν αυτό φτάνει μέχρι κάτω απο μόνο του. Μπορείς να το αποφύγεις βάζοντας padding-bottom ίσο με το ύψος του footer στο .page-wrapper, αλλά αυτό σε αναγκάζει να έχεις fixed ύψος του footer (μπορεί και να μην είναι πρόβλημα ανάλογα την περίπτωση).

με absolute positioning το footer θα κολίσει στο συγκεκριμένο σημείο (με λίγο scrolling θα αρχίσει να ανεβαίνει πάνω), ενώ με fixed position αν scrollαρει το footer θα συνεχίσει να είναι στο ίδιο σημείο της σελίδας.

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Δεν κατάλαβα γιατί με έκανες quote... :-)

έτυχε να δώ την απάντηση με το absolution positioning και ήθελα να αναφέρω πως αυτό δεν θα δουλέψει, θέλει fixed positioning.

 

example (χάνει το position του μόλις αρχίσεις το scrolling)

solution

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Αν κατάλαβα καλά θέλεις το footer να είναι πάντα στο κάτω μέρος της οθόνης όταν έχεις μικρό κείμενο αλλά να μην καλύπτει το κείμενο όταν αυτό είναι μεγάλο...

 

Δες λίγο εδώ: webdot.gr (παίξε με το zoom in, zoom out του browser να δεις πως συμπεριφέρεται το footer) κάτι τέτοιο θέλεις;

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0
footer{
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 150, 0, 0.9);
  width: 100%;
}

 

:shock:

 

Κάτι δεν κατάλαβες, η τεχνική του absolute positioning δεν έχει να κάνει με τα παραδείγματα που μας έδειξες..  :-)

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

έτυχε να δώ την απάντηση με το absolution positioning και ήθελα να αναφέρω πως αυτό δεν θα δουλέψει, θέλει fixed positioning.

 

example (χάνει το position του μόλις αρχίσεις το scrolling)

solution

 

"Εννοείται" πως όταν κάνεις absolute positioning πάντα βάζεις και position: relative σε κάποιον κατάλληλο parent για να πετύχεις το επιθυμητό αποτέλεσμα. Εσύ στο παράδειγμά σου δεν το κάνεις αυτό επομένως δεν είναι περίεργο που δε δουλεύει σωστά (ο Alan το κάνει). Το fixed position δεν είναι κατάλληλη λύση για footers, τουλάχιστον όπως εγώ αντιλαμβάνομαι την έννοια του footer.

  • Like 1
Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

"Εννοείται" πως όταν κάνεις absolute positioning πάντα βάζεις και position: relative σε κάποιον κατάλληλο parent για να πετύχεις το επιθυμητό αποτέλεσμα. Εσύ στο παράδειγμά σου δεν το κάνεις αυτό επομένως δεν είναι περίεργο που δε δουλεύει σωστά (ο Alan το κάνει). Το fixed position δεν είναι κατάλληλη λύση για footers, τουλάχιστον όπως εγώ αντιλαμβάνομαι την έννοια του footer.

Να προσθέσω ότι χρειάζεται 100% height σε body, html ώστε το wrap element να κατεβαίνει μέχρι κάτω (έχoντας και αυτό min-height: 100%).. ;)

Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Συμφωνα με το post του Alan μπορεις να κάνεις το εξης, χωρις να υπάρχει absolute positioning, δοκιμασμενο μονο σε mozilla

 

Φτιαξε ενα div wrapper και καντο parent ολου του markup ακριβως μετα απο το body, και κανε ακριβως αυτο στο css

#wrapper { min-height: 100%; height: 100%; margin: 0 auto -50px; }
/* αφαιρεις 50 px για να φυγει το vertical scroller του browser */
/* αν υποθεσουμε οτι το footer εχει fixed height value 50px */
#footer { height: 50px; }
Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

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

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

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

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι εύκολο!

Εγγραφείτε για έναν νέο λογαριασμό

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
  • Δημιουργία νέου...

Με την περιήγησή σας στο insomnia.gr, αποδέχεστε τη χρήση cookies που ενισχύουν σημαντικά την εμπειρία χρήσης.