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

HTML Layouts

Downloadpercent

Από τον Downloadpercent
στο Web Design - Development

 Share

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

Downloadpercent Proficient

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;
}

 

defacer Grand Master

defacer

Δημοσ.
Δημοσ.

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

 

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

linkinpark4175 Proficient

linkinpark4175

Δημοσ.
Δημοσ. 

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;
}
defacer Grand Master

defacer

Δημοσ.
Δημοσ.

Πολλοί τρόποι και το θέμα είναι τι ζητάς απο το 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 (μπορεί και να μην είναι πρόβλημα ανάλογα την περίπτωση).

linkinpark4175 Proficient

linkinpark4175

Δημοσ.
Δημοσ.

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

 

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

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

linkinpark4175 Proficient

linkinpark4175

Δημοσ.
Δημοσ.

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

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

 

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

solution

Gigenis Experienced

Gigenis

Δημοσ.
Δημοσ.

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

 

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

Alan Fall Proficient

Alan Fall

Δημοσ.
Δημοσ. 
footer{
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 150, 0, 0.9);
  width: 100%;
}

 

:shock:

 

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

defacer Grand Master

defacer

Δημοσ.
Δημοσ.

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

 

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

solution

 

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

  • Like 1
Alan Fall Proficient

Alan Fall

Δημοσ.
Δημοσ.

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

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

Chemical Mentor

Chemical

Δημοσ.
Δημοσ.

Συμφωνα με το 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; }

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

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

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

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

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

Σύνδεση

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

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...