Stel dat ik de volgende CSS- en HTML-code heb:
#header {
height: 150px;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>Antwoord 1, autoriteit 100%
Relatieve+absolute positionering is de beste keuze:
#header {
position: relative;
min-height: 150px;
}
#header-content {
position: absolute;
bottom: 0;
left: 0;
}
#header, #header * {
background: rgba(40, 40, 100, 0.25);
}<div id="header">
<h1>Title</h1>
<div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>Antwoord 2, autoriteit 13%
Gebruik CSS-positionering:
/* Creates a new stacking context on the header */
#header {
position: relative;
}
/* Positions header-content at the bottom of header's context */
#header-content {
position: absolute;
bottom: 0;
}
Zoals Cletus merkte op , u hoeft de header-inhoud te identificeren om dit werk te maken.
<span id="header-content">some header content</span>
<div style="height:100%; position:relative;">
<div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>
Antwoord 3, Autoriteit 12%
Als u zich geen zorgen maakt over Legacy-browsers, gebruik dan een FLEXBOX.
Het bovenliggende element heeft zijn weergavetype nodig om te flexten
div.parent {
display: flex;
height: 100%;
}
Vervolgens stelt u het align-zelf van het kindelement in op FLEX-END.
span.child {
display: inline-block;
align-self: flex-end;
}
Hier is de bron die ik vroeger leerde:
http://css-tricks.com/snippets/css/a- Gids-to-flexbox /
Antwoord 4, Autoriteit 9%
Ik gebruik deze eigenschappen en het werkt!
#header {
display: table-cell;
vertical-align: bottom;
}
Antwoord 5, Autoriteit 5%
Na een tijdje worstelen met hetzelfde probleem, dacht ik eindelijk een oplossing die voldoet aan al mijn vereisten:
- vereist niet dat ik de hoogte van de container ken.
- In tegenstelling tot relatieve + absolute oplossingen drijft de inhoud niet in zijn eigen laag (d.w.z. het embedden normaal in de container DIV).
- Werkt over browsers (IE8 +).
- eenvoudig te implementeren.
De oplossing neemt slechts één <div>, die ik de “aligner” noem:
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
html
<div class="bottom_aligner"></div>
... Your content here ...
Deze truc werkt door een lang, mager div te maken, die de tekstbasislijn naar de onderkant van de container duwt.
Hier is een compleet voorbeeld dat bereikt wat het OP vroeg. Ik heb de “Bottom_Aligner” alleen dik en rood voor demonstratiedoeleinden gemaakt.
CSS:
.outer-container {
border: 2px solid black;
height: 175px;
width: 300px;
}
.top-section {
background: lightgreen;
height: 50%;
}
.bottom-section {
background: lightblue;
height: 50%;
margin: 8px;
}
.bottom-aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 3px;
background: red;
}
.bottom-content {
display: inline-block;
}
.top-content {
padding: 8px;
}
HTML:
<body>
<div class="outer-container">
<div class="top-section">
This text
<br> is on top.
</div>
<div class="bottom-section">
<div class="bottom-aligner"></div>
<div class="bottom-content">
I like it here
<br> at the bottom.
</div>
</div>
</div>
</body>
Antwoord 6, autoriteit 3%
De moderne manier om dit te doen is het gebruik van flexbox. Zie het voorbeeld hieronder. U hoeft niet eens Some text...in een HTML-tag in te vullen, aangezien tekst die rechtstreeks in een flexcontainer zit, is ingepakt in een anoniem flex-item.
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}<header>
<h1>Header title</h1>
Some text aligns to the bottom
</header>Antwoord 7, autoriteit 2%
display: flex;
align-items: flex-end;
Antwoord 8, autoriteit 2%
Inline of inline-blokelementen kunnen worden uitgelijnd met de onderkant van blokniveau-elementen als de regelhoogte van het bovenliggende/blokelement groter is dan die van het inline-element.*
opmaak:
<h1 class="alignBtm"><span>I'm at the bottom</span></h1>
css:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
* Zorg ervoor dat u zich in de standaardmodus bevindt
Antwoord 9
U kunt eenvoudig flex
bereiken
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}<header>
<h1>Header title</h1>
Some text aligns to the bottom
</header>Antwoord 10
Hier is een andere oplossing met behulp van FLEXBOX, maar zonder flex-end voor onderaanlijning te gebruiken. Het idee is om margin-bottomop H1 toe te voegen aan Auto om de resterende inhoud naar de onderkant te duwen:
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header h1 {
margin-bottom:auto;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>Antwoord 11
U kunt de volgende aanpak gebruiken:
.header-parent {
height: 150px;
display: grid;
}
.header-content {
align-self: end;
}<div class="header-parent">
<h1>Header title</h1>
<div class="header-content">
Header content
</div>
</div>Antwoord 12
Als je meerdere, dynamische hoogte-items hebt, gebruik dan de CSS-weergavewaarden van tabel en tabelcel:
HTML
<html>
<body>
<div class="valign bottom">
<div>
<div>my bottom aligned div 1</div>
<div>my bottom aligned div 2</div>
<div>my bottom aligned div 3</div>
</div>
</div>
</body>
</html>
CSS
html,
body {
width: 100%;
height: 100%;
}
.valign {
display: table;
width: 100%;
height: 100%;
}
.valign > div {
display: table-cell;
width: 100%;
height: 100%;
}
.valign.bottom > div {
vertical-align: bottom;
}
Ik heb hier een JSBin-demo gemaakt: http://jsbin.com/INOnAkuF/2/edit
De demo heeft ook een voorbeeld hoe u verticaal centraal kunt uitlijnen met behulp van dezelfde techniek.
Antwoord 13
U hebt hiervoor geen absolute + relatief nodig. Het is zeer mogelijk met behulp van relatieve positie voor zowel container als gegevens. Dit is hoe je het doet.
Aannemen hoogte van uw gegevens wordt x. Uw container is relatief en de voettekst is ook relatief. Het enige dat u hoeft te doen is toevoegen aan uw gegevens
bottom: -webkit-calc(-100% + x);
Uw gegevens zullen altijd onderaan uw container staan. Werkt, zelfs als u een container met dynamische hoogte heeft.
HTML is als deze
<div class="container">
<div class="data"></div>
</div>
CSS is als deze
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.data{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
Ik hoop dat dit helpt.
Antwoord 14
Hier is de flexibele manier om het te doen. Natuurlijk wordt het niet ondersteund door IE8, zoals de gebruiker 7 jaar geleden nodig had. Afhankelijk van wat u moet ondersteunen, kunnen sommige hiervan worden weggelegd.
Nog steeds zou het leuk zijn als er een manier was om dit te doen zonder een buitencontainer, laat de tekst zichzelf binnen zijn eigen zelf uitlijnen.
#header {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 150px;
}
Antwoord 15
Een zeer eenvoudige, one-line-oplossing, is om Line-HEIGTH aan de DIV toe te voegen, in gedachten is dat alle tekst van de DIV de bodem zal gaan.
CSS:
#layer{width:198px;
height:48px;
line-height:72px;
border:1px #000 solid}
#layer a{text-decoration:none;}
HTML:
<div id="layer">
<a href="#">text at div's bottom.</a>
</div>
Houd er rekening mee dat dit een praktische en snelle oplossing is als u gewoon tekst wilt in DIV om naar beneden te gaan, als u afbeeldingen en spullen moet combineren, moet u een beetje complexer en responsiever CSS
Antwoord 16
Al deze antwoorden en niemand werkten voor mij … ik ben geen flexbox-expert, maar dit was redelijk gemakkelijk te achterhalen, het is eenvoudig en gemakkelijk te begrijpen en te gebruiken. Om iets van de rest van de inhoud te scheiden, plaatst u een lege div en laat het groeien om de ruimte te vullen.
https://jsfiddle.net/8sfelmgd/1/
.myContainer {
display: flex;
height: 250px;
flex-flow: column;
}
.filler {
flex: 1 1;
}
<div class="myContainer">
<div>Top</div>
<div class="filler"></div>
<div>Bottom</div>
</div>
Dit reageert zoals verwacht wanneer het onderste gehalte niet is vastgesteld wanneer de container niet is bevestigd.
Antwoord 17
De best mogelijke oplossing om een div naar de bodem te verplaatsen, is als volgt.
In principe wat u hoeft te doen, is de display flex en flexrichting instellen als een kolom aan de ouder en een ‘margin-top: Auto’ aan zijn kind toevoegen dat naar de onderkant van de container moet worden gedreven
Opmerking: ik heb bootstrap en zijn lessen gebruikt.
.box-wrapper {
height: 400px;
border: 1px solid #000;
margin: 20px;
display: flex; // added for representation purpose only. Bootstrap default class is already added
flex-direction: column;
}
.link-02 {
margin-top: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="box-wrapper d-flex flex-column col-4">
<div>incidunt blanditiis debitis</div>
<div class="news-box">
<img class="d-block" alt="non ipsam nihil" src="https://via.placeholder.com/150">
<p>Labore consectetur doloribus qui ab et qui aut facere quos.</p>
</div>
<a href="https://oscar.com" target="_blank" class="link-02">
This is moved to bottom with minimal effort
</a>
</div>Antwoord 18
Als u de hoogte van de wikkelverdiv van de inhoud zou kunnen instellen (# header-inhoud zoals getoond in het antwoord van een ander), kunt u in plaats van de hele #HOOPER, misschien ook deze aanpak proberen:
HTML
<div id="header">
<h1>some title</h1>
<div id="header-content">
<span>
first line of header text<br>
second line of header text<br>
third, last line of header text
</span>
</div>
</div>
CSS
#header-content{
height:100px;
}
#header-content::before{
display:inline-block;
content:'';
height:100%;
vertical-align:bottom;
}
#header-content span{
display:inline-block;
}
Antwoord 19
Ik heb een manier bedacht die een stuk eenvoudiger is dan wat is genoemd.
Stel de hoogte van de header div in. Geef daarbinnen uw H1-tag als volgt op:
float: left;
padding: 90px 10px 11px
Ik werk aan een site voor een klant en voor het ontwerp moet de tekst onderaan een bepaalde div staan. Ik heb het resultaat bereikt met behulp van deze twee lijnen, en het werkt prima. Als de tekst toch uitzet, blijft de opvulling hetzelfde.
Antwoord 20
Een aanvulling op de andere genoemde flexbox-oplossingen:
U kunt flex-grow: 1gebruiken op de eerste div. Op deze manier wordt je tweede div uitgelijnd met de onderkant, terwijl de eerste alle resterende ruimte bedekt.
Op de bovenliggende div moet u display: flexen flex-direction: columngebruiken.
/* parent-wrapper div */
.container {
display: flex;
flex-direction: column;
}
/* first-upper div */
.main {
flex-grow: 1;
}
Controleer viool: https://jsfiddle.net/1yj3ve05/
Antwoord 21
Ik vond deze oplossing gebaseerd op een standaard bootstrap-startsjabloon
/* HTML */
<div class="content_wrapper">
<div class="content_floating">
<h2>HIS This is the header<br>
In Two Rows</h2>
<p>This is a description at the bottom too</p>
</div>
</div>
/* css */
.content_wrapper{
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
.content_floating{
display: table-cell;
vertical-align: bottom;
padding-bottom:80px;
}
Antwoord 22
#header {
height: 150px;
display:flex;
flex-direction:column;
}
.top{
flex: 1;
}
<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>
#header {
height: 250px;
display:flex;
flex-direction:column;
background-color:yellow;
}
.top{
flex: 1;
}<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>Antwoord 23
probeer met:
div.myclass { margin-top: 100%; }
probeer het % te veranderen om het op te lossen. Voorbeeld: 120% of 90% … enz.
Antwoord 24
De site die ik zojuist voor een klant heb gemaakt, vroeg om de voettekst in een hoog vak te plaatsen, met de tekst onderaan. Ik heb dit bereikt met eenvoudige opvulling, zou voor alle browsers moeten werken.
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
Antwoord 25
Het lijkt te werken:
#content {
/* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
vertical-align: -@header_height + @content_height;
/* only need it if your content is <div>,
* if it is inline (e.g., <a>) will work without it */
display: inline-block;
}
Het gebruik van mindermaakt het oplossen van CSS-puzzels meer als coderen dan als… Ik hou gewoon van CSS. Het is een waar genoegen als je de hele lay-out kunt veranderen (zonder hem te verbreken 🙂 door slechts één parameter te wijzigen.
Antwoord 26
Een perfect voorbeeld voor meerdere browsers is waarschijnlijk deze hier:
http://www.csszengarden.com/?cssfile =/213/213.css&page=0
Het idee is om zowel de div onderaan weer te geven als deze daar te laten blijven. Vaak zal de eenvoudige aanpak ervoor zorgen dat de plakkerige div omhoog schuift met de hoofdinhoud.
Hierna volgt een volledig werkend minimaal voorbeeld. Merk op dat er geen bedrog voor het insluiten van div’s vereist is. De vele BR’s zijn er alleen om een schuifbalk te forceren:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#floater {
background: yellow;
height: 200px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 5;
border-top: 2px solid gold;
}
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="floater"></div>
</body>
</html>
Als u zich afvraagt dat uw code niet werkt op IE, vergeet dan niet om de DOCTYPE-tag aan de bovenkant toe te voegen. Het is cruciaal hiervoor om op IE te werken. Ook zou dit de eerste tag moeten zijn en er mag er niets boven voorkomen.
Antwoord 27
2015-oplossing
<div style='width:200px; height:60px; border:1px solid red;'>
<table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
<tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
</table>
</div>
http://codepen.io/anon/pen/qermdx
Welkom