Hoe kan ik mijn div onderaan de container plaatsen?

Gezien de volgende HTML:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Antwoord 1, autoriteit 100%

Waarschijnlijk niet.

Wijs position:relativetoe aan #container, en dan position:absolute; bottom:0;naar #copyright.


#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Antwoord 2, autoriteit 36%

Eigenlijk werkt het geaccepteerde antwoord van @User alleen als het venster lang is en de inhoud kort. Maar als de inhoud lang is en het venster kort, wordt de copyright-informatie over de pagina-inhoud geplaatst en als u naar beneden scrolt om de inhoud te zien, krijgt u een zwevende copyrightmelding. Dat maakt deze oplossing nutteloos voor de meeste pagina’s (zoals deze pagina eigenlijk).

De meest gebruikelijke manier om dit te doen is de gedemonstreerde ‘CSS sticky footer’-benadering, of een iets slankere variant. Deze aanpak werkt prima — ALS je een voettekst met een vaste hoogte hebt.

Als u een variabele hoogte-voettekst nodig hebt die onderaan het venster verschijnt als de inhoud te kort is en onderaan de inhoud is als het venster te kort is, wat doet u dan?

Slik uw trots in en gebruik een tabel.

Bijvoorbeeld:

* {
    padding: 0;
    margin: 0;
}
html, body {
    height: 100%;
}
#container {
    height: 100%;
    border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>

3, Autoriteit 22%

de FlexBox-aanpak!

in ondersteunde browsers , kunt u het volgende gebruiken:

Voorbeeld hier

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

4, Autoriteit 12%

Ja U kunt dit doen zonder absolutepositionering en zonder tables (welke schroeven met markup en dergelijke) te gebruiken.

DEMO
Dit is getest om te werken op IE>7, chrome, FF & is heel eenvoudig toe te voegen aan uw bestaande lay-out.

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>
    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>
#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}
.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

Het doet in feite wat float:bottomzou doen, zelfs rekening houdend met het probleem dat in het antwoord van @Rick Reilly wordt genoemd!


Antwoord 5, autoriteit 2%

Het is een oude vraag, maar dit is een unieke benadering die in verschillende gevallen kan helpen.

Pure CSS, zonder absolute positionering, zonder enige hoogte, Cross-Browser (IE9+)

bekijk die Working Fiddle

Omdat de normale stroom ‘van boven naar beneden’ is, kunnen we de #copyrightdiv niet gewoon vragen om aan de onderkant van zijn ouder te blijven zonder absoluut een of andere manier te positioneren, maar als we wilden de #copyrightdiv om bij de top van zijn ouder te blijven, het zal heel eenvoudig zijn – omdat dit de normale manier is om te stromen.

Dus we zullen dit in ons voordeel gebruiken.
we zullen de volgorde van de divs in de HTML veranderen, nu staat de #copyrightdiv bovenaan, en de inhoud volgt deze meteen.
We maken ook de inhoud DIV-stretch helemaal (met behulp van pseudo-elementen en clearingtechnieken)

Nu is het gewoon een kwestie van het inverteren van die volgorde in het zicht. die gemakkelijk kan worden gedaan met CSS-transformatie.

We roteren de container met 180DEG, en nu: up-is-down. (en we zijn de inhoud omgekeerd om weer normaal te zien)

Als we een scroolbar willen hebben binnen het inhoudsgebied, moeten we een beetje meer van CSS-magie toepassen. Zoals kan worden getoond hier [In dat voorbeeld, de inhoud is onder een koptekst – maar het is hetzelfde idee]

* {
  margin: 0;
  padding: 0;
}
html,
body,
#Container {
  height: 100%;
  color: white;
}
#Container:before {
  content: '';
  height: 100%;
  float: left;
}
#Copyright {
  background-color: green;
}
#Stretch {
  background-color: blue;
}
#Stretch:after {
  content: '';
  display: block;
  clear: both;
}
#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>

6

CSS-raster

Aangezien het gebruik van CSS Grid toeneemt, zou ik align-selfmet het element dat zich in een rastercontainer bevindt.

align-selfkan elk van de volgende waarden bevatten: end, self-end, flex-endvoor het volgende voorbeeld.

#parent {
  display: grid;
}
#child1 {
  align-self: end;
}
/* Extra Styling for Snippet */
#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}
#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}
<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>
</div>

Antwoord 7

Maak een andere container divvoor de bovenstaande elementen #copyright. Voeg net boven copyright een nieuwe divtoe:
<div style="clear:both;"></div>
Het dwingt de footerom onder al het andere te staan, net zoals in het geval van relatieve positionering (bottom:0px;).


Antwoord 8

Probeer dit;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>


Antwoord 9

Hoewel geen van de hier gegeven antwoorden van toepassing leek of werkte in mijn specifieke geval, kwam ik dit artikeldat deze handige oplossing biedt:

#container {
  display: table;
}
#copyright {
  display: table-footer-group;
}

Ik vind het erg handig voor het toepassen van responsief ontwerp voor mobiele weergave zonder de hele html-code van een website opnieuw te ordenen, en bodyzelf in te stellen als een tabel.

Merk op dat alleen de eerste table-footer-groupof table-header-groupals zodanig wordt weergegeven: als er meer dan één zijn, worden de andere worden weergegeven als table-row-group.


Antwoord 10

Je kunt het vak inderdaad alignmet de bottomzonder position:absolutete gebruiken als je de heightweet van de #containermet behulp van de functie tekstuitlijningvan inline-block-elementen.

Hierkun je het in actie zien.

Dit is de code:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}
#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}
#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

Antwoord 11

De eigenschap translateY en top gebruiken

Stel het onderliggende element in op positie: relatief en verplaats het dan naar boven: 100% (dat is de 100% hoogte van de ouder) en blijf aan de onderkant van de ouder door te transformeren: translateY(-100%) (dat is -100% van de lengte van het kind).

Voordelen

  • je niethet element uit de paginastroom haalt
  • het is dynamisch

Maar nog steeds een tijdelijke oplossing 🙁

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

Vergeet de voorvoegsels voor de oudere browser niet.


Antwoord 12

CodePen-link hier.

html, body {
    width: 100%;
    height: 100%;
}
.overlay {
    min-height: 100%;
    position: relative;
}
.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}
.height {
    width: 900px;
    height: 50px;
}
.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}
<div class="overlay">
    <div class="container">
        <div class="height">
            content
        </div>
    </div>
    <div class="footer">
        footer
    </div>
</div>

Antwoord 13

Als je wilt dat het aan de bodem “plakt”, ongeacht de hoogte van de container, dan is absolute positionering de juiste keuze. Als het copyright-element het laatste in de container is, staat het natuurlijk altijd onderaan.

Kun je je vraag verder uitdiepen? Leg precies uit wat je probeert te doen (en waarom je geen absolute positionering wilt gebruiken)?


Antwoord 14

Als je de hoogte van het onderliggende blok niet weet:

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}
<div id="parent">
    <div class="child">child
    </div> 
</div>

Antwoord 15

Als er voorwaarden zijn voor het gebruik van position:absolute;of position:relative;, kun je altijd proberen paddingouder divof het plaatsen van een margin-top:x;. In de meeste gevallen geen erg goede methode, maar in sommige gevallen kan het van pas komen.


Antwoord 16

Misschien helpt dit iemand: je kunt de div altijd buiten de andere div plaatsen en deze vervolgens naar boven duwen met een negatieve marge:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

Antwoord 17

#container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Antwoord 18

Wil “position:absolute” niet gebruiken voor plakkerige voettekst onderaan. Dan kun je het op deze manier doen:

html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }
<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>

Antwoord 19

Alleen omdat dit helemaal niet is genoemd, wat meestal goed werkt in situaties zoals de jouwe:

De copyright-div nade container-div plaatsen

Je hoeft alleen de copyright-div op een vergelijkbare manier op te maken als de andere container (dezelfde totale breedte, centrering, enz.), en alles is in orde.

CSS:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>
<div id="copyright">
    Copyright Foo web designs
</div>

De enige keer dat dit misschien niet ideaal is, is wanneer uw container-div wordt gedeclareerd met height:100%, en de gebruiker moet naar beneden scrollen om het copyright te zien. Maar je kunt er nog steeds omheen werken (bijv. margin-top:-20px– wanneer de hoogte van je copyright-element 20px is).

  • Geen absolute positionering
  • Geen tafelopstelling
  • Geen gekke css, dat ziet er in elke andere browser anders uit (tenminste IE, weet je)
  • Eenvoudige en duidelijke opmaak

Terzijde: ik weet dat de OP om een oplossing vroeg die “… blijft plakken aan de onderkant van de ‘container’ div …”, en niet iets eronder, maar kom op, mensen zoeken hier naar goede oplossingen, en dit is er een!


Antwoord 20

Hier is een benadering die erop gericht is om een element met een bekende hoogte en breedte (in ieder geval ongeveer) naar rechts te laten zweven en onderaan te blijven, terwijl het zich gedraagt als een inline-element voor de andere elementen. Het is rechtsonder gefocust omdat je het gemakkelijk in een andere hoek kunt plaatsen via andere methoden.

Ik moest een navigatiebalk maken die de daadwerkelijke links aan de rechterbenedenhoek en willekeurige broer-elementen zou hebben, terwijl ze ervoor zorgen dat de balk zelf goed uitgerekt, zonder de lay-out te verstoren. Ik gebruikte een “schaduw” -element om de spatie van de navigatiebalk in te nemen en voegt het aan het einde van de kinderknooppunten van de container toe.


<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>
<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>

21

Er is niets float:bottomin CSS. De beste manier gebruikt positionering in dergelijke gevallen:

position:absolute;
bottom:0;

22

Volgens: w3schools.com

Een element met position: absolute; is ten opzichte van de
dichtstbijzijnde gepositioneerde voorouder (in plaats van ten opzichte van de
kijkvenster, zoals vastgesteld).

Dus je moet het bovenliggende element met iets hetzij relatief of absoluut, etc en de positie van het gewenste element om absolute en laatste set beneden naar 0 te plaatsen.


23

Div stijl, position:absolute;bottom:5px;width:100%;werkt,
Maar het vereist meer scrollup situatie.

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}

Other episodes