Jak Mogę umieścić div na dnie pojemnika?

Podano następujący HTML: 

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

Chciałbym #copyright trzymać się dna #container.

Czy Mogę to osiągnąć bez użycia pozycjonowania absolutnego? Jeśli właściwość float obsługuje wartość 'bottom', wydaje się, że to wystarczy, ale niestety tak nie jest.

 631
htmlcss
Author: TylerH, 0000-00-00
Source

4 answers

Prawdopodobnie nie.

Przypisać position:relative do #container, a następnie position:absolute; bottom:0; do #copyright.

#container {
    
}
#copyright {
    position: absolute;
    bottom: 0;
}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
 794
Author: User,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-04 03:56:12

Właściwie, zaakceptowana odpowiedź przez @Usera będzie działać tylko wtedy, gdy okno jest wysokie, a treść krótka. Ale jeśli zawartość jest wysoka, a okno jest krótkie, umieści informacje o prawach autorskich nad zawartością strony, a następnie przewinięcie w dół, aby zobaczyć zawartość, pozostawi ci pływającą informację o prawach autorskich. To czyni to rozwiązanie bezużytecznym dla większości stron(jak ta strona, w rzeczywistości).

Najczęstszym sposobem na to jest pokazane podejście "CSS sticky footer" lub nieco szczuplejsza odmiana. To podejście działa świetnie-jeśli masz stopkę o stałej wysokości.

Jeśli potrzebujesz stopki o zmiennej wysokości, która pojawi się na dole okna, jeśli zawartość jest zbyt krótka, i na dole zawartości, jeśli okno jest zbyt krótkie, co zrobić?

Połknij swoją dumę i użyj stołu.

Na przykład: 

* {
    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>
Spróbuj. Będzie to działać dla dowolnego rozmiaru okna, dla dowolnej ilości zawartości, dla stopki dowolnego rozmiaru, na każda przeglądarka... nawet IE6.

Jeśli chcesz użyć tabeli do układania, poświęć chwilę, aby zadać sobie pytanie, dlaczego. CSS miał ułatwić nam życie. i tak jest, ogólnie rzecz biorąc, ale faktem jest, że nawet po tylu latach, to wciąż zepsuty, nieintuicyjny bałagan. To nie rozwiąże każdego problemu. Jest niekompletna.

Tabele nie są fajne, ale przynajmniej na razie są czasami najlepszym sposobem na rozwiązanie problemu projektowego.

 314
Author: Rick Reilly,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-28 11:41:31

Podejście flexbox!

W obsługiwanych przeglądarkach, możesz użyć:

Przykład Tutaj

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


.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}
<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

Powyższe rozwiązanie jest prawdopodobnie bardziej elastyczne, jednak tutaj jest alternatywne rozwiązanie:

Przykład Tutaj

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}


.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}
<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

Na marginesie, możesz dodać prefiksy dostawców dla dodatkowej obsługi.

 102
Author: Josh Crozier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-28 22:00:45

Tak można to zrobić bez pozycjonowania absolute i bez używania table s (które wkręcają się ze znacznikami i tym podobne).

DEMO
Jest to testowane do pracy na IE> 7, chrome, FF i jest naprawdę łatwe do dodania do istniejącego układu.

<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;
}

Skutecznie robi to, co float:bottom, nawet biorąc pod uwagę problem wskazany w odpowiedzi @ Rick Reilly!

 101
Author: Hashbrown,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-01 07:16:53