Ik heb een pagina met een buitenste div die een koptekst, inhoud en voettekst div. Ik wil dat de voettekst div om de onderkant van de browser te knuffelen, zelfs wanneer de inhoud DIV niet lang genoeg is om het zichtbare gebied te vullen (d.w.z. er is geen scrollen).
Antwoord 1, Autoriteit 100%
Uw probleem kan eenvoudig worden vastgesteld door FLEXBOX te gebruiken. Wikkel gewoon uw .Container en uw .footer in een flexcontainer met een min-hoogte: 100VH, schakel de richting naar de kolom zodat ze op elkaar stapelen en de inhoud met de ruimte tussen, zodat de voettekst rechtvaardigt naar de onderkant.
.flex-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between;
}<div class="flex-wrapper">
<div class="container">The content</div>
<div class="footer">The Footer</div>
</div>Antwoord 2, Autoriteit 16%
Wat ik wilde, was om de voettekst alleen op de bodem van de browserweergave te hebben als de inhoud niet lang genoeg was om het browservenster (niet-kleverig) te vullen.
Ik was in staat om te bereiken met behulp van de CSS-functie Calc (). Die wordt ondersteund door alle moderne browsers. Je zou kunnen gebruiken als:
<div class="container">CONTENT</div>
<div class="footer">FOOTER</div>
De CSS:
.container
{
min-height: 70%;
min-height: -webkit-calc(100% - 186px);
min-height: -moz-calc(100% - 186px);
min-height: calc(100% - 186px);
}
Verander 186 in de grootte van je voettekst.
Antwoord 3, autoriteit 10%
Voorbeeld: http://jsfiddle.net/AU6yD/
html, body { height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }
#bottom, #push { height:30px;}
body { background:#333;}
#header { height:30px; background:#000; color:#fff; }
#footer { height:30px; background:#000; color:#fff; }<div id="wrapper">
<div id="header">
Header
</div>
<div id="push"></div>
</div>
<div id="bottom">
<div id="footer">
Footer
</div>
</div>Antwoord 4, autoriteit 9%
Ik deed wat Jahmic up top deed (laat me nog geen commentaar geven), behalve dat ik VH moest gebruiken in plaats van % omdat ik het niet zomaar op een containerklasse kon toepassen.
#inner-body-wrapper
{
min-height: 70vh;
min-height: -webkit-calc(100vh - 186px);
min-height: -moz-calc(100vh - 186px);
min-height: calc(100vh - 186px);
}
Antwoord 5, autoriteit 6%
Gebruik een lege div met flex-grow:1 om ongebruikte spaties vlak voor de voettekst te vullen.
<body style="min-height: 100vh; display: flex; flex-direction: column;">
Any content you want,
put it here. Can be wrapped,
nested, whatever.
<div style="flex-grow:1"></div>
<!-- Any content below this will always be at bottom. -->
<footer>Always way at the bottom</footer>
</body>
Extract de stijlen naar css als dat nodig is. Dit werkt door <body> als display:flex;
Antwoord 6, autoriteit 5%
Hoewel deze vraag oud is, wil ik iets verbeteren aan het geweldige antwoord van Luke Flournoy.
Luke’s antwoord werkt alleen als je twee elementen in de wrapper hebt. Het is heel gebruikelijk om ten minste 3: koptekst, hoofdinhoud en voettekst te hebben. Met deze drie elementen zal de code van Luke ze gelijkmatig verticaal verdelen – hoogstwaarschijnlijk niet wat je wilt. Met meerdere elementen kunt u dit doen:
.flex-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: flex-start;
}
.footer {
margin-top: auto;
}<div class="flex-wrapper">
<div class="header">The header</div>
<div class="content">The content</div>
<div class="footer">The footer</div>
</div>Antwoord 7, autoriteit 4%
U kunt precies doen wat u wilt met Flexbox, bijvoorbeeld:
html, body {
height: 100%;
width: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.content {
flex-grow: 1;
}
Als een opmerking moet de voettekst buiten het -inhoud -element
zijn
HTML-structuur is zoiets als volgt:
<html>
<body>
<div class="wrapper">
<header></header>
<div class="content">
<!-- Content -->
</div>
<footer></footer>
</div>
</body>
</html>
Antwoord 8, Autoriteit 3%
Om het te laten werken wanneer de voettekst groter is op mobiele apparaten vergelijken met op desktop, u kunt de voettekst niet echt kennen. Een manier om het te doen, is om de voettekst uit te rekken om het volledige scherm te bedekken.
html,
body {
height: 100%;
}
.container {
min-height: 80%;
background-color: #f3f3f3;
}
.footer {
background-color: #cccccc;
box-shadow: 0px 500px 0px 500px #cccccc;
}<div class="container">Main content</div>
<div class="footer">Footer</div>Antwoord 9
Ik heb geprobeerd: http://jsfiddle.net/au6yd/ Zoals hier is het de beste optie, maar Ik had problemen wanneer de inhoud van de <div id="wrapper">begon te veel te zien
bewijsmateriaal.png , wat ik heb gedaan om dit op te lossen was het verfrissend de lichaamsgrootte telkens wanneer ik veranderde de inhoud van die div als volgt:
var body = document.body,
html = document.documentElement;
body.style.height = 100 + "%";
setTimeout(function(){
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight,
html.offsetHeight );
body.style.height = height + "px";
}, 500);
Antwoord 10
Probeer dit codepen.io/dendii/pen/llpkjm media responsive
html, body {
color:#fff;
}
.wrapper{
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 auto;
min-height: 100vh;
}
.main{
width:100%;
overflow:hidden;
}
.main-inner {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
article,aside{
float:left;
padding:20px 10px;
}
article{
width:70%;
background:darkred;
}
aside{
width:30%;
background:darkblue;
}
.top {
padding:20px 10px;
height:100%;
background:darkgreen;
}
.bottom,.text-mid {
padding:20px 10px;
height:100%;
background:darkorange;
}
.text-mid {
margin-top: auto;
background:darkgrey;
}
@media (max-width: 768px){
.main-inner{
display: block;
}
article,aside{
width:100%;
float:none;
display: block;
}
}<div class="wrapper">
<header class="top">
<h1>Header</h1>
</header>
<div class="main"><div class="main-inner">
<article>
blank content
</article>
<aside>
class sidebar
</aside>
</div></div>
<div class="text-mid">
<div class="center">
Whatever you want to keep.
</div>
</div>
<footer class="bottom">
<div class="footer">
Footer
</div>
</footer>
</div>Antwoord 11
Ik heb hetzelfde probleem opgelost met jQuery
var windowHeiht = $(window).height();
var footerPosition = $("#asd-footer").position()['top'];
if (windowHeiht > footerPosition) {
$("#asd-footer").css("position", "absolute");
$("#asd-footer").css("bottom", "0");
$("#asd-footer").css("width", "100%");
}
Antwoord 12
Herwerken van de jQuery-oplossing. Ik heb het werkend met het formaat van het venster. Wanneer het venster groter is dan de pagina, wordt de positie van de voettekst “absoluut” vastgezet onderaan het venster. Als het venster kleiner is dan de pagina, blijft de voettekst onder aan de pagina staan en wordt van onderaf gescrolld.
<style>
.FooterBottom {
width:100%;
bottom: 0;
position: absolute;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
FooterPosition();
$(window).resize(function () {
FooterPosition();
});
});
var originalFooterBottom = 0;
function FooterPosition() {
var windowHeight = $(window).height();
if (originalFooterBottom == 0) {
var footer = $("#Footer");
originalFooterBottom = footer.position()['top'] + footer.height();
}
if (windowHeight > originalFooterBottom) {
var footerElement = document.getElementById("Footer");
if (!footerElement.classList.contains('FooterBottom')) {
footerElement.classList.add('FooterBottom');
}
}
else {
var footerElement = document.getElementById("Footer");
if (footerElement.classList.contains('FooterBottom')) {
footerElement.classList.remove('FooterBottom');
}
}
}
</script>Antwoord 13
body{
position:relative;
min-height:100vh;
}
footor{
position:absolute;
bottom:0%;
width:100vw;
}Antwoord 14
Wikkel uw voettekst als volgt in met een klasse:
<div class="footer">
<h1>footer content</h1>
Voeg vervolgens de volgende css-eigenschappen toe aan de voettekst:
.footer{
position: fixed;
bottom: 0;
}
Antwoord 15
ik had zojuist de positie gewijzigd in plakkerig en de top op 100% gezet. Daarna ga ik naar het bovenliggende blok en stel de minimale hoogte in op 100%
Dit loste mijn probleem op.
In mijn geval was het bovenliggende blok body, dus ik heb de minimale lichaamslengte gewijzigd.
.footer {
position: sticky;
top: 100%;
text-align: center;
width: 100%;
height: 60px;
background-color: #1abc9c;}
body{
margin:0;
padding:0;
min-height:100vh;}
Antwoord 16
Ik heb dit geprobeerd en het werkt tot nu toe prima
position:absolute;
bottom:0;
width:100%;
of
position:absolute;
bottom:0;
left:0;
right:0;
Antwoord 17
Dit is wat ik doe voor mijn pagina
<h6 style="position:absolute; bottom:0;">This is footer at bottom of page without scrollbars</h6>