Bootstrap/CSS - Fußzeile im unteren Bereich auch ohne ausreichenden Inhalt

Ich weiß, das ist eine doppelte Frage, ich habe viele Fragen zu dieser speziellen Frage wie this one gelesen.Bootstrap/CSS - Fußzeile im unteren Bereich auch ohne ausreichenden Inhalt

Aber ich kann nicht für das Leben von mir mein zu arbeiten. Ich habe viele Kombinationen von height und min-height für meine html und body probiert, mit% und vh. Ich habe versucht, den Rand auf 0 zu setzen, aber das hilft nicht. Ich habe dies sowohl in Chrome als auch in Firefox versucht, keiner der Browser funktioniert. Es gab einige Antworten, die die Verwendung von position: absolute vorgeschlagen, aber das vermasselt das Styling für alle Inhalte, die ich habe.

Einige Combos Ich habe versucht:

html, body{ 
    height: 100%; 
    min-height: 100%; 
}

html{ 
    height: 100%; 
} 

body { 
    min-height: 100%; 
}

html{ 
    height: 100%; 
    margin: 0; 
} 

body { 
    margin: 0; 
    min-height: 100%; 
}

Mein HTML-Layout:

<html> 
    <head> 
     ... stuff 
    </head> 
    <body class=".container"> 
     ... stuff 
    </body> 
</html>

Quelle

2017-11-29 Valachio

Sie eine feste verwenden können Position für den unteren Rand, aber das kann zu Anzeigeproblemen führen, wenn der Inhalt abgedeckt wird.

Ich empfehle etwas mit wie

body { 
    height: calc(100vh - 100px); 
}

wenn Sie 100 px für die Kopf- und Fußzeile

Quelle

2017-11-29 03:34:24

Danke. Das funktioniert für meinen Laptop. Ich muss testen, wie reaktionsschnell diese Methode auf anderen Geräten ist. – Valachio

Sie diesen Code verwenden, um eine feste foo zu erstellen ter am unteren Rand der Seite

.yourfooterclass { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:30px; 
    width:100%; 
    background:#999; 
}

im Grunde, was dies die Fußzeile am unteren Rand der Seite positioniert tut, so spielt es keine Rolle, wie viel Inhalt, den Sie auf der Seite haben immer an der bottomn sein wird

Quelle

2017-11-29 03:25:03 A61NN5

Ich will nicht die Fußzeile festzustecken verlassen wollen am unteren Bildschirmrand. Ich möchte einfach, dass die Fußzeile unten auf der Seite bleibt; und wenn es nicht genug Inhalt gibt, um das anfängliche Ansichtsfenster zu füllen, möchte ich immer noch, dass die Fußzeile unten ist – Valachio

... Genau das, was ich Ihnen gerade gezeigt habe – A61NN5

Was Sie suchen, ist position: fixed, die angibt, dass das Element an diesem Speicherort unabhängig von dem anderen Inhalt behoben werden soll. Gepaart mit bottom: 0, zu behaupten, dass das Element sollte auf die unten auf der Seite festgelegt werden:

body { 
 
    margin: 0; 
 
} 
 

 
div { 
 
    padding: 5px; 
 
} 
 

 
.container { 
 
    background: #DDD; 
 
    height: 50px; 
 
} 
 

 
.footer { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    height: 20px; 
 
    width: 100%; 
 
    background: #DDD; 
 
}

<body> 
 
    <div class="container">Text</div> 
 
    <div class="footer">Copyright</div> 
 
</body>

hoffe, das hilft! :)

Quelle

2017-11-29 03:28:53

Lösung: Sie können die HTML-5-Elemente wie -Header verwenden, Artikel, Abschnitt, Footer und legen Sie es in Höhe und Breite nach Ihren Anforderungen ...

Quelle

2017-11-29 03:29:08

Bootstrap/CSS - Fußzeile im unteren Bereich auch ohne ausreichenden Inhalt

Antwort

Verwandte Themen