Halten Fußzeile nach unten (CSS)

Dies scheint wie eine beliebte Frage, aber auch nach der Aufnahme einiger der Vorschlag, bekomme ich nicht das gewünschte Ergebnis.Halten Fußzeile nach unten (CSS)

Ich habe eine Fußzeile und ich möchte es am Ende der Seite sein. Hier ist mein HTML und CSS: (der hallo‘sind nur Platzhalter Inhalt)

HTML:

<body> 
<ul> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 

</ul> 

<div class="navbar navbar-default footer"> 
    <div class="container"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#"> Blog </a></li> 
     <li> <a href="#"> Terms of use </a></li> 
     <li><a href="#"> Contact us </a></li> 
    </ul> 
    <a href="#" class="navbar-btn btn-info btn pull-right"> 
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a> 
    </div> 
</div> 

</body>

CSS:

.footer { 
bottom:0; 
position: absolute; 
width:100%; 

} 

body { 

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    height:100%; 
    min-height: 100%; 

}

Nun, wenn ich die position: absolute; im .footer Stil haben, dann Die Fußzeile befindet sich beim Laden der Seite unten und bleibt beim Abwärtsscrollen an derselben Position. Es überschneidet sich auch mit dem Inhalt, wie aus der Geige here

Wenn ich die position: absolute Eigenschaft entfernen, dann ist die Fußzeile nicht am unteren Rand der Seite und wird direkt unter dem vorherigen Element gehen. Sehen Sie hier, um zu verstehen, was ich meine LINK

Ich möchte es am Ende der Seite sein. Wenn das Alter minimal ist, sollte es ganz nach unten gehen, und wenn sich vor der Fußzeile viel Inhalt befindet, sollte es nicht überlappen und unter alle gehen. Eine jQuery-Lösung ist auch in Ordnung.

Quelle

2016-09-30 Keshav Vasudevan

http://stackoverflow.com/questions/18739937/how-to-keep-footer-at-bottom-of-screen – channasmcs

aktualisieren ur CSS wie folgt

überprüfen Sie die Ausgabe in jsbin Link to Jsbin

.footer { 
    position:relative; 
    top:225px; 



}

.footer { 
 
\t position:relative; 
 
\t top:225px; 
 

 
    
 

 
} 
 

 
body { 
 

 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    height:100%; 
 
    min-height: 100%; 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
<ul> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 
    <li> Hi </li> 
 

 
</ul> 
 

 
<div class="navbar navbar-default footer"> 
 
    <div class="container"> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="#"> Blog </a></li> 
 
     <li> <a href="#"> Terms of use </a></li> 
 
     <li><a href="#"> Contact us </a></li> 
 
    </ul> 
 
    <a href="#" class="navbar-btn btn-info btn pull-right"> 
 
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a> 
 
    </div> 
 
</div> 
 

 
</body> 
 

 
</html>

Quelle

2016-09-30 03:39:27

Danke für die Antwort, aber das ist falsch. Ich möchte, dass die Fußzeile ganz unten ist, unabhängig von der Fenstergröße. Wenn ich sage, dass meine Fensterhöhe mehr als 225 px ist, dann würde diese Antwort nicht wahr sein. Danke, aber für die Zeit nehmen zu beantworten –

wollen Sie feste Fußzeile –

Nein, ich möchte es regelmäßig Footer Sie auf Websites wie stackoverflow –

I Update Codeprüfung haben diese,

CSS

.footer { 
    bottom:0; 
    position: fixed; 
    width:100%; 
    margin-bottom: 0 !important; 
} 
.content { 
    position: relative; 
} 
body { 

    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    height:100%; 
    min-height: 100%; 
}

HTML

<div class="content"> 
<ul> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 

</ul> 
<div> 
<div class="navbar navbar-default footer"> 
    <div class="container"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#"> Blog </a></li> 
     <li> <a href="#"> Terms of use </a></li> 
     <li><a href="#"> Contact us </a></li> 
    </ul> 
    <a href="#" class="navbar-btn btn-info btn pull-right"> 
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a> 
    </div> 
</div> 
</div>

bootply

Quelle

2016-09-30 04:01:25 CasperSL

Check out this wunderbar CodePen von Chris Bracco, es wird Ihr Problem lösen.

/** 
 
* Demo Styles 
 
*/ 
 

 
html { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 

 
body { 
 
    position: relative; 
 
    margin: 0; 
 
    padding-bottom: 6rem; 
 
    min-height: 100%; 
 
    font-family: "Helvetica Neue", Arial, sans-serif; 
 
} 
 

 
.demo { 
 
    margin: 0 auto; 
 
    padding-top: 64px; 
 
    max-width: 640px; 
 
    width: 94%; 
 
} 
 

 
.demo h1 { 
 
    margin-top: 0; 
 
} 
 

 
/** 
 
* Footer Styles 
 
*/ 
 

 
.footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 1rem; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
}

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<div class="demo"> 
 
    <h1>CSS “Always on the bottom” Footer</h1> 
 

 
    <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p> 
 

 
    <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p> 
 

 
    <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p> 
 

 
    <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p> 
 
</div> 
 

 
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

Quelle

2016-09-30 04:14:40

Sie sollten verwenden Position "fest", aber Sie müssen Ihren Körper-Tag ein padding-bottom geben. Außerdem benötigt die Navigationsleiste einen Rand von Null.

.footer { 
    position:fixed; 
    bottom:0px; 
    width:100%; 
} 
.footer.navbar { 
    margin-bottom:0px; 
} 

body { 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    height:100%; 
    min-height: 100%; 
    padding-bottom:120px; // whatever size you need 
}

Bootply: http://www.bootply.com/e1EQiagcBd

Quelle

2016-09-30 04:26:39 Daniel

Ich habe Ihre Frage gefallen hat, und ich habe eine Lösung dafür, kopieren Sie bitte diese, um Ihre HTML einfügen, wird es für mich

arbeitete

/* css */ 
 

 

 
* { 
 
\t box-sizing:border-box; 
 
\t -moz-box-sizing:border-box; 
 
\t -ms-box-sizing:border-box; 
 
\t -webkit-box-sizing:border-box; 
 
} 
 
html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t float:left; 
 
} 
 
body { 
 
\t margin:0; 
 
\t position:relative; 
 
} 
 
header { 
 
\t float:left; 
 
\t width:100%; 
 
\t padding:40px; 
 
\t background:#666; 
 
} 
 
.letter_s { 
 
\t position:relative; 
 
\t float:left; 
 
\t width:100%; 
 
\t min-height: calc(100% - 160px); 
 
} 
 
footer { 
 
\t float:left; 
 
\t width:100%; 
 
\t padding:40px; 
 
\t background:#666; 
 
}

<!-- HTML --> 
 

 
<header></header><!-- /header --> 
 

 
<div class="letter_s"> 
 
\t <p>he soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soule soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution th is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution this is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulutionthis is the soulution this is the soulutionthis is the soulution</p> 
 
\t  
 
</div><!-- /.letter_s --> 
 

 
<footer></footer><!-- /footer-->

Geben Sie mehr Buchstaben oder fügen Sie etwas hinzu, was Sie sehen können, was passiert

Quelle

2016-09-30 04:29:23

Versuchen Sie, dem HTML-Tag position: relative; zu geben.

Quelle

2016-09-30 05:52:32

Sie können ein flexibles Abstandselement zwischen der Fußzeile und allem darüber platzieren. Dieses Abstandselement wird so weit wie nötig erweitert und verkleinert, um die Fußzeile am unteren Rand der Seite zu halten.

Hier ist der HTML-Code mit dem Spacer div:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 

<body> 
<ul> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
    <li> Hi </li> 
</ul> 

<div class="spacer"></div> 

<div class="navbar navbar-default footer"> 
    <div class="container"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#"> Blog </a></li> 
     <li> <a href="#"> Terms of use </a></li> 
     <li><a href="#"> Contact us </a></li> 
    </ul> 
    <a href="#" class="navbar-btn btn-info btn pull-right"> 
    <i class="fa fa-twitter" aria-hidden="true"></i> Follow us on Twitter! </a> 
    </div> 
</div> 

</body> 
</html>

Und hier das CSS ist:

body { 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 

.spacer{ 
    flex:1; 
}

ich diesen Code in meinem Chrome-Browser getestet haben, und es funktioniert einwandfrei.

Sie können mehr über flexible Boxen bei MDN lesen: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

ein HTML-Element hinzufügen als Abstandshalter nicht die empfohlene Praxis für Styling-Web-Seiten sein könnte. Aber flexible Abstandshalter wie diese werden häufig in Android- und iOS-Layouts verwendet. Solche Abstandhalter sind sehr nützlich, um ein stabiles Layout zu erstellen, das mit vielen verschiedenen Bildschirmgrößen funktioniert.

Quelle

2017-10-21 23:24:59 Mike

Halten Fußzeile nach unten (CSS)

Antwort

Verwandte Themen