Nackte Python
Ich weiß, dass diese Frage wahrscheinlich einige hundert Mal gestellt wurde, aber leider hat mir keine Antwort, die ich hier gefunden habe, wirklich geholfen.
Ich habe zum Beispiel diese Antworten versucht:
- Bootstrap-Fußzeile nicht unten
- Fußzeile zum Ende der Seite spülen, Twitter Bootstrap
- Höhe nicht 100% auf Container Fluid, obwohl HTML und Body sind
Aber ich habe immer noch das Problem, dass, wenn mein Seiteninhalt zu “klein” ist und nicht die gesamte Höhe des Körper-/Seitencontainers ausfüllt, die Fußzeile einfach irgendwo über dem Ende des Browserfensters schwebt.
Dies ist der Code für meine Fußzeile:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<footer class="d-flex justify-content-center">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="https://stackoverflow.com/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="https://stackoverflow.com/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
</div>
</footer>
Ich verwende Bootstrap 4.1 und Chrome, hier ist auch ein Codepen zu meiner Seite:
https://codepen.io/anon/pen/oMZVxq
Hinweis: Sie müssen die Seitenleistenansicht in Codepen verwenden, um tatsächlich zu sehen, dass sich die Fußzeile nicht unten befindet, da die Ansichtsgröße in Codepen so klein ist, dass sie korrekt aussieht.
G-Cyrillus
Sie können die integrierte Bootstrap-Klasse verwenden, um dies zu erreichen.
Was Sie brauchen, ist, dass der Container ein Column-Flex-Container ist. zu verwendende Klasse sind: d-flex flex-column
Um den Container auf height:100% zu setzen, können Sie die Klasse anwenden h-100zu html, body und dem container hinzufügen oder zum container style hinzufügen height:100vh;
Für die Fußzeile, a margin-top:auto tun wird, ist die zu verwendende Klasse: mt-auto;
Beispiel unten, um im Ganzseitenmodus ausgeführt zu werden
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<html class="h-100">
<body class="h-100">
<!-- Page Container -->
<div id="page-container" class="container-fluid pr-0 pl-0 h-100 d-flex flex-column">
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light bg-light pt-3 pb-3 d-flex justify-content-center">
<div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 d-flex justify-content-between">
<div class="d-flex justify-content-start align-items-center">
<a href="https://stackoverflow.com/" class="kf-links">
<span class="h5">
<i class="fas fa-paper-plane"></i>
<span class="h4 font-weight-bold kf-dark">
MyPage
</span>
</span>
</a>
</div>
<!-- Main Header Navigation -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a href="https://stackoverflow.com/" class="nav-link ">Link1</a>
</li>
<li class="nav-item">
<a href="" class="nav-link ">Link2</a>
</li>
<li class="nav-item">
<a href="" class="nav-link ">Link3</a>
</li>
</ul>
</div>
<!-- END Main Header Navigation -->
</div>
</nav>
<!-- END Header -->
<!-- Main Container -->
<div style="background:#5c90d2">
<div class="col-md-12 text-center pt-5 pb-5">
<div class="pt-5 pb-5">
<h1>
<span class="main-text">
Login
</span>
</h1>
<p class="lead"><span class="main-text">
Login Now!
</span></p>
</div>
</div>
</div>
<!-- Content -->
<div class="d-flex justify-content-center fadeIn">
<div class="col-md-8 col-xs-12">
<div class="d-flex justify-content-center">
<div class="col-md-6 pt-5 pb-5 pr-0 pl-0">
<form class="form-horizontal" method="post">
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_username">E-Mail</label>
<input id="id_username" class="form-control" maxlength="254" name="username" value="" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_password">Password</label>
<input id="id_password" class="form-control" name="password" type="password" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<small class="float-right">
<a href="#" class="kf-links">Forgot Password?</a>
</small>
</div>
</div>
<div class="form-group mt-5">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 pl-0">
<button class="btn btn-sm btn-block btn-primary" type="submit">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END Content -->
<!-- END Main Container -->
<!-- Footer -->
<footer class="d-flex justify-content-center mt-auto">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<!-- Copyright Info -->
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="https://stackoverflow.com/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="https://stackoverflow.com/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
<!-- END Copyright Info -->
</div>
</footer>
<!-- END Footer -->
</div>
<!-- END Page Container -->
</body>
</html>
Codestift aktualisiert https://codepen.io/anon/pen/PBpgNN
Erinnerung für Boostrap-Klassen https://getbootstrap.com/docs/4.5/utilities/flex/ über Dimensionierung siehe https://getbootstrap.com/docs/4.5/utilities/sizing/
shivamag00
Wenn Sie eine feste Fußzeile wünschen, fügen Sie einfach die Klasse hinzu fixed-bottom zum footer Tag wie unten gezeigt.
<footer class="fixed-bottom bg-dark">
<div class="text-center">
<p>Footer</p>
</div>
</footer>
Razvan Zamfir
Zuerst hinzufügen display: flex; und flex-direction: column; zu #page-container.
Jetzt haben Sie die Voraussetzungen geschaffen, um die Fußzeile nach unten auszurichten. Stellen Sie es ein margin-top zu auto (durch Hinzufügen der Klasse mt-auto) und du bist fertig;
<div class="d-flex justify-content-center mt-auto">
Content here
</div>
Sehen dieser Codestift.
Also das hat mir geholfen – falls jemand noch nach einer Antwort sucht:
auf Ihrem <HTML>, <body> und Ihr Container-Div fügt eine Klasse hinzu h-100 und Ihre Fußzeile bleibt unten.
Wichtig
Eine Sache, die ich getan habe, um die zusätzliche Höhe zu entfernen, ist, dass ich bei meinem Container-Div die geändert habe h-100 Styling zu height: calc(100% - 200px) !important; (wobei -200px die Höhe meiner Navigation und Fußzeile war)
Wenn Sie den Bootstrap nicht verwenden, finden Sie hier das Styling .h-100{height:100% !important}
Wenn Sie eine Fußzeile mit statischer Höhe haben, können Sie so etwas tun dieser Codestift
– zgut
23. Juli 2018 um 14:31 Uhr