Ik heb de volgende pagina (Deadlink: http://www.workingstorage.com/Sample.htm) met een voettekst waarvan ik niet kan gaan zitten aan de onderkant van de pagina.
Ik wil de voettekst
- Stick aan de onderkant van het venster Wanneer de pagina kort is en het scherm niet is gevuld en
- Blijf aan het einde van het document en ga naar beneden als normaal wanneer er meer is dan een screendum van inhoud (in plaats van overlappende inhoud).
De CSS is geërfd en befudddles. Ik kan het niet goed veranderen om een minimale hoogte op de inhoud te plaatsen of de voettekst naar de bodem te laten gaan.
1, Autoriteit 100%
Een eenvoudige methode is om het lichaam 100%van uw pagina te maken, met een min-heightvan 100%ook. Dit werkt prima als de hoogte van uw voettekst niet verandert.
Geef de voettekst een negatieve margin-top:
footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;
}
2, Autoriteit 80%
Hieronder zijn 4 verschillende methoden van mij:
In elk voorbeeld zijn de teksten vrij bewerkbaar om te illustreren hoe de inhoud in verschillende scenario’s zou maken.
1) FLEXBOX
3, Autoriteit 17%
Een zeer eenvoudige benadering die Works Great Cross-browser is, is dit:
http://matthewjamestaylor.com/blog/ Footers-at-the-bottom-of-the-pagina
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>Antwoord 4, autoriteit 12%
Ik heb dit gebruikt om mijn voettekst onderaan te plakken en het werkte voor mij:
HTML
<body>
<div class="allButFooter">
<!-- Your page's content goes here, including header, nav, aside, everything -->
</div>
<footer>
<!-- Footer content -->
</footer>
</body>
Dat is de enige wijziging die u hoeft te doen in de HTML, voeg die divtoe met de klasse "allButFooter". Ik deed het met alle pagina’s, de pagina’s die zo kort waren dat ik wist dat de voettekst niet aan de onderkant zou blijven plakken, en ook pagina’s die lang genoeg waren dat ik al wist dat ik moest scrollen. Ik deed dit, zodat ik kon zien dat het goed werkt in het geval dat de inhoud van een pagina dynamisch is.
CSS
.allButFooter {
min-height: calc(100vh - 40px);
}
De "allButFooter"Klasse heeft een min-heightwaarde die afhankelijk is van de hoogte van de viewport (100vh100% van de lengte van de viewport ) En de hoogte van de voettekst, die ik al kende was 40px.
Dat is alles wat ik deed, en het werkte perfect voor mij. Ik heb het niet geprobeerd in elke browser, gewoon firefox, chroom en rand, en de resultaten waren zoals ik wilde. De voettekst plakt op de bodem en je hoeft niet te knoeien met Z-index, positie of andere eigenschappen. De positie van elk element in mijn document was de standaardpositie, ik heb het niet gewijzigd tot absoluut of vast of zoiets.
Werken met responsief ontwerp
Hier is iets dat ik wil wissen. Deze oplossing, met dezelfde footer die 40px hoog was, werkte niet zoals ik had verwacht toen ik in een responsief ontwerp werkte met behulp van Twitter-Bootstrap. Ik moest de waarde wijzigen die ik in de functie deelte:
.allButFooter {
min-height: calc(100vh - 95px);
}
Dit is waarschijnlijk omdat Twitter-Bootstrapwordt geleverd met zijn eigen marges en paddingen, dus daarom moest ik die waarde aanpassen.
Ik hoop dat dit van wat gebruik is voor jullie! Tenminste, het is een eenvoudige oplossing om te proberen, en het gaat niet om grote veranderingen in het hele document te maken.
5, Autoriteit 11%
Van IE7 U kunt eenvoudig
gebruiken
#footer {
position:fixed;
bottom:0;
}
Zie caniuse voor ondersteuning.
6, Autoriteit 10%
Een zeer eenvoudige flex-oplossing die geen vaste hoogtes of veranderende positie van elementen aanneemt.
html
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
CSS
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
Browserondersteuning
Alle belangrijke browsers, behalve IE11 en lager.
Zorg ervoor dat u Autoprefixergebruikt voor de juiste voorvoegsels.
Antwoord 7, autoriteit 5%
Een eenvoudige oplossing die ik gebruik, werkt vanuit IE8+
Geef min-height:100% op html, zodat als de inhoud minder is dan de pagina nog steeds de volledige kijkpoorthoogte inneemt en voetteksten onderaan de pagina blijven staan. Wanneer de inhoud toeneemt, verschuift de voettekst naar beneden met de inhoud en blijft deze onderaan staan.
JS fiddle werkende demo: http://jsfiddle.net/3L3h64qo/2/
CSS
html{
position:relative;
min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
margin:0;
padding:0;
}
.pageContentWrapper{
margin-bottom:100px;/* Height of footer*/
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height:100px;
background:#ccc;
}
HTML
<html>
<body>
<div class="pageContentWrapper">
<!-- All the page content goes here-->
</div>
<div class="footer">
</div>
</body>
</html>
Antwoord 8, autoriteit 4%
Toch is er nog een heel eenvoudige oplossing:
html, body {
height: 100%;
width: 100%;
margin: 0;
display: table;
}
footer {
background-color: grey;
display: table-row;
height: 0;
}
De truc is om een display:tablete gebruiken voor het hele document en display:table-rowmet height:0voor de voettekst .
Omdat de footer de enige body-child is met een weergave als table-row, wordt deze onderaan de pagina weergegeven.
Antwoord 9, autoriteit 2%
Doe dit
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
Je kunt ook lezen over flex, het wordt ondersteund door alle moderne browsers
Update: ik heb over flex gelezen en het geprobeerd. Het werkte voor mij. Hoop dat het voor jou hetzelfde doet. Hier is hoe ik het heb geïmplementeerd. Hier is main niet de ID, het is de div
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: block;
flex: 1 0 auto;
}
Hier kun je meer lezen over flex https://css- tricks.com/snippets/css/a-guide-to-flexbox/
Houd er rekening mee dat het niet wordt ondersteund door oudere versies van IE.
Antwoord 10, autoriteit 2%
Een ding om op te letten zijn mobiele apparaten, omdat ze het idee van de viewport op een ‘ongewone’ manier implementeren:
Als zodanig is het gebruik van position: fixed;(zoals ik op andere plaatsen heb aanbevolen) meestal niet de juiste manier. Het hangt natuurlijk af van het exacte gedrag dat je zoekt.
Wat ik heb gebruikt en goed heeft gewerkt op desktop en mobiel, is:
<body>
<div id="footer"></div>
</body>
met
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
#footer {
position: absolute;
bottom: 0;
}
Antwoord 11, autoriteit 2%
Dit staat bekend als een plakkerige voettekst. Een google-zoekopdrachthiervoor levert veel resultaten op. Een CSS Sticky Footeris de ware Ik heb met succes gebruikt. Maar er zijn er meer.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>12
Ik heb zojuist als vergelijkbare vraag beantwoord:
Positie voettekst onderaan de pagina met een vaste koptekst
Ik ben behoorlijk nieuw bij webontwikkeling, en ik weet dat dit al is beantwoord, maar dit is de gemakkelijkste manier waarop ik het oplost en ik denk op de een of andere manier anders is. Ik wilde iets flexibel omdat de voettekst van mijn web-app een dynamische hoogte heeft, ik eindigde met behulp van FlexBox en een spacer.
- Start door de hoogte in te stellen voor uw HTML en -lichaam
html, body {
height: 100%;
display: flex;
flex-direction: column;
margin: 0px;
}
Ik neem aan dat een columnGedrag voor onze app, in het geval dat u een koptekst, held of een inhoud verticaal uitgelijnd moet toevoegen.
- Maak de afstandsklasse
.spacer {
flex: 1;
}
- dus later op je HTML kan iets als
zijn
<html>
<body>
<header> Header </header>
Some content...
<div class='spacer'></div>
<footer> Footer </footer>
</body>
</html>
Je kunt er hier mee spelen
https://codepen.io/anon/pen/xmGZQL
Antwoord 13
Werkt voor mij.
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
#container{
height:100vh;
margin:0;
display:flex;
flex-direction:column;
}
#footer{
margin-top:auto;
}<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>Antwoord 14
footer {
margin-top:calc(5% + 60px);
}
Dit werkt prima
Antwoord 15
Mijn jQuery-methode, deze plaatst de voettekst onder aan de pagina als de pagina-inhoud lager is dan de vensterhoogte, of anders zet u de voettekst achter de inhoud:
Ook als u de code in zijn eigen bijlage houdt voordat andere code wordt gebruikt, wordt de tijd die nodig is om de voettekst te verplaatsen, verkort.
(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
Antwoord 16
EEN-lijnoplossing met Bootstrap
Afgezien van alle geboden CSS- en jQuery-oplossingen,
Ik heb een oplossing vermeld met behulp van Bootstrapmet een enkele klassedeclaratie op body-tag: d-flex flex-column justify-content-between
- Dit VEREIST NIETdat u van tevoren de hoogte van de voettekst moet weten.
- Dit NIETvereist instelling van positie absoluut.
- Dit WERKTmet dynamische divs die overlopenop kleinere schermen.
html, body {
height: 100%;
}<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body class="d-flex flex-column justify-content-between text-white text-center">
<header class="p-5 bg-dark">
<h1>Header</h1>
</header>
<main class="p-5 bg-primary">
<h1>Main</h1>
</main>
<footer class="p-5 bg-warning">
<h1>Footer</h1>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>Antwoord 17
Houd de voettekst onderaan door Flexbox te gebruiken
<div class="page">
<div> <!-- Wraper (Without footer) -->
<header>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas a accusamus quidem laudantium numquam laborum obcaecati delectus debitis necessitatibus aspernatur.
</header>
<article>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur impedit blanditiis esse dicta, deleniti placeat ex sequi adipisci nesciunt aut.
</article>
</div> <!-- End: Wraper (Without footer) -->
<footer >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, porro.
</footer>
</div>
Opmerking:
-
Zorg ervoor dat u alle inhoud van de pagina binnen de
<div>houdt met de klasse vanpage. -
Zorg ervoor dat u alle inhoud behalve
<footer>in een andere<div>plaatst, zoals in het bovenstaande voorbeeld. Als je het niet doet, zullen inline-elementen zoals<span>,<button>werken als blokelementen.
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
Code Uitleg:
min-height: 100vhzorgt ervoor dat het body-element zich uitstrekt tot ten minste de volledige hoogte van het schermflex-direction: columnbehoudt het gedrag van de normale documentstroom in termen van het vasthouden van gestapelde blokelementen (waarbij wordt aangenomen dat directe kinderen van het lichaam allemaal inderdaad blokelementen zijn).margin-top: autoduwt de footer naar de onderkant van het scherm.
Een live voorbeeld van het onderaan houden van de voettekst op codePen
Antwoord 18
Ik heb zelf dit probleem onderzocht. Ik heb nogal wat oplossingen gezien en elk van hen had problemen, vaak met magische getallen.
Dus met behulp van best practices uit verschillende bronnen kwam ik tot deze oplossing:
http://jsfiddle.net/vfSM3/248/
Wat ik hier specifiek wilde bereiken, was om de hoofdinhoud te laten scrollen tussen voettekst en koptekst in het groene gebied.
Hier is een eenvoudige CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 4em;
background-color: red;
position: relative;
z-index: 1;
}
.content {
background: white;
position: absolute;
top: 5em;
bottom: 5em;
overflow: auto;
}
.contentinner {
}
.container {
height: 100%;
margin: -4em 0 -2em 0;
background: green;
position: relative;
overflow: auto;
}
footer {
height: 2em;
position: relative;
z-index: 1;
background-color: yellow;
}
Antwoord 19
Zo heb ik hetzelfde probleem opgelost
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%;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}<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>20
U kunt dit doen
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
21
Pas het gedeelte Footer
gewoon aan
.footer
{
position: fixed;
bottom: 0;
width: 100%;
padding: 1rem;
text-align: center;
}
<div class="footer">
Footer is always bootom
</div>
22
Ik denk dat u de hoofdinhoud op de hoogteporthoogte kunt instellen, dus als de inhoud overschrijdt, zal de hoogte van de hoofdinhoud de positie van de voettekst definiëren
* {
margin: 0;
padding: 0;
width: 100%;
}
body {
display: flex;
flex-direction: column;
}
header {
height: 50px;
background: red;
}
main {
background: blue;
/* This is the most important part*/
height: 100vh;
}
footer{
background: black;
height: 50px;
bottom: 0;
}<header></header>
<main></main>
<footer></footer>23
Positie fixedmet bottom, left, EN rightSET TOT 0 WERKEN HET BESTE VOOR ME:
.footer {
position: fixed;
background : #d1ccc0;
bottom : 0;
left : 0;
right : 0;
height : 50px;
}
Positie absolutehoudt niet aan de onderkant, maar fixeddoet.
Antwoord 24
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
25
In vergelijking met andere oplossingen hoeft men geen extra containers toe te voegen. Daarom is deze oplossing een beetje eleganter. Onder het CODE-voorbeeld zal ik uitleggen waarom dit werkt.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
html
{
height:100%;
}
body
{
min-height:100%;
padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
margin:0; /*see above comment*/
}
body
{
position:relative;
padding-bottom:60px; /* Same height as the footer. */
}
footer
{
position:absolute;
bottom:0px;
height: 60px;
background-color: red;
}
</style>
</head>
<body>
<header>header</header>
<footer>footer</footer>
</body>
</html>
Dus het eerste dat we doen, maakt de grootste container (HTML) 100%. De HTML-pagina is zo groot als de pagina zelf. Vervolgens zetten we de hoogte van het lichaam, het kan groter zijn dan 100% van de HTML-tag, maar het zou op zijn minst zo groot moeten zijn, daarom gebruiken we min-hoogte 100%.
We maken het lichaam ook relatief. Relatief betekent dat u het blokelement relatief vanuit zijn oorspronkelijke positie kunt verplaatsen. Dat gebruiken we hier echter niet. Omdat familielid een tweede gebruik heeft. Elk absoluut element is ofwel absoluut voor de root (html) of voor de eerste relatieve ouder/grootouder. Dat is wat we willen, we willen dat de voettekst absoluut is, relatief aan de body, namelijk de onderkant.
De laatste stap is om de voettekst in te stellen op absoluut en bottom:0, waardoor deze naar de onderkant van de eerste ouder/grootouder wordt verplaatst die relatief is (body natuurlijk).
Nu moeten we nog één probleem oplossen: als we de volledige pagina vullen, komt de inhoud onder de voettekst. Waarom? Nou, omdat de voettekst niet langer in de “html-stroom” staat, omdat deze absoluut is. Dus hoe lossen we dit op? We zullen opvulling aan het lichaam toevoegen. Dit zorgt ervoor dat de body eigenlijk groter is dan de inhoud.
Antwoord 26
Ik heb dat bereikt met behulp van CSS-raster, in feite heb ik 3 rijen gedefinieerd:
- Koptekst
- inhoud
- voettekst
En het gebruikte raster om de maten te definiëren, de truc is om de voettekst aan het einde van de rij uit te lijnen, als volgt:
CSS
body {
display: grid;
grid-template-rows: auto auto auto;
}
footer {
display: grid;
align-self: end; /* The trick */
}
HTML-bestand
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header>
Header content
</header>
<h1>main body</h1>
<p>This is a paragraph.</p>
<footer>
<p>Hello there.</p>
</footer>
</body>
</html>
Je kunt meer rijen gebruiken, maar vergeet niet om de aan de CSS toe te voegen, of zet alles in een div.
Deze handleiding hieris echt heeft me geholpen dit uit te zoeken.
Antwoord 27
Het is eigenlijk heel eenvoudig. Deze oplossing vereist geen hoogte van de voettekst.
<body>
<div class="app">
Website
</div>
<div class="footer">
Footer
</div>
</body>
.app {
min-height: 100vh;
}
Antwoord 28
Een aanvulling op het uitstekende Antwoordvan @vsync voor de Flexbox-optie (hieronder gekopieerd).
1) Flexbox
Antwoord 29
Stel gewoon de html, body en de andere rijen behalve de footer in op 100%.
bijv.
<body>
<header></header>
<content></content>
<footer></footer>
de CSS wordt
html, body, header, content{
height:100%;
}