Jak wyrównać zawartość div do dołu

1162

Powiedz, że mam następujący kod CSS i HTML:

#header {
  height: 150px;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

Rozwiń fragment kodu

Sekcja nagłówka ma stałą wysokość, ale treść nagłówka może ulec zmianie.

Chciałbym, aby zawartość nagłówka była wyrównana pionowo do dolnej części sekcji nagłówka, więc ostatni wiersz tekstu „przykleja się” do dolnej części sekcji nagłówka.

Więc jeśli jest tylko jedna linia tekstu, wyglądałoby to tak:

-----------------------------
| Tytuł nagłówka
|
|
|
| treść nagłówka (wynik w jednym wierszu)
-----------------------------

A jeśli byłyby trzy linie:

-----------------------------
| Tytuł nagłówka
|
| treść nagłówka (tak jest
| wiele rzeczy, które idealnie
| obejmuje trzy linie)
-----------------------------

Jak można to zrobić w CSS?

html css vertical-alignment

— kristof
źródło

1321

Pozycjonowanie względne + absolutne jest najlepszym wyborem:

#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">Some content</div>
</div>

Rozwiń fragment kodu

Ale możesz mieć z tym problemy. Kiedy próbowałem, miałem problemy z rozwijanymi menu pojawiającymi się poniżej zawartości. To po prostu nie jest ładne.

Szczerze mówiąc, w przypadku problemów z centrowaniem w pionie i, cóż, wszelkie problemy z wyrównywaniem w pionie elementów nie mają ustalonej wysokości, łatwiej jest po prostu użyć tabel.

Przykład: Czy możesz zrobić ten układ HTML bez użycia tabel?

— Cletus
źródło

4

Znalazłem to rozwiązanie przed zapytaniem tutaj, ale jakoś zapomniałem dodać pozycję: krewny; do div nagłówka, a treść nadal lądowała na dole strony. Dzięki

— Kristof

15

Możesz zarządzać swoją pozycją rozwijaną za pomocą właściwości z-index, aby przenieść ją na pierwszy plan. Pamiętaj, że właściwość z-index działa z elementami umieszczonymi względnie lub absolutnie. Poza tym semantycznie nie jest poprawne użycie tabeli do osiągnięcia wyników układu.

— Alejandro García Iglesias

1

W przypadku treści tekstowej opisanej w pierwotnym problemie # treść nagłówka powinna naprawdę być pelementem, a przynajmniejspan

— Josh Burgess

2

Nie używaj tabel do danych nie tabelarycznych! Zamiast tego użyj właściwości wyświetlania CSS display: table-celllub table-row, lub table. Już nigdy więcej nie będziesz musiał używać tabel dla czystego układu.

— Jeremy Moritz

1

Pozycja nagłówka jest względem czego?

— stos 1

158

Użyj pozycjonowania CSS:

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

Jak zauważył Cletus , musisz zidentyfikować zawartość nagłówka, aby to zadziałało.

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

— Patrick McElhaney
źródło

4

fyi ... spowodowało to zwinięcie mojej zawartości nagłówka, więc musiałem dodać a width = '100%'na treści nagłówka

— dsdsdsdsd

2

@dsdsdsdsd Możesz to naprawić, dodając display: block do # nagłówka-zawartości.

— Patrick McElhaney

1

@dsdsdsdsd Powodem jest to, że <span>elementy mają display: inline;domyślnie, co nie zajmuje pełnej szerokości kontenera. Najbardziej odpowiednią poprawką byłaby zmiana zakresu na <div>domyślnie element blokowy.

— BadHorsie,

1

Lub jeden z <h1> - <h6>, który również jest domyślnie blokowany i identyfikuje tekst jako nagłówek, co jest przydatne dla wyszukiwarek, technologii wspomagających i osób czytających kod.

— Patrick McElhaney

Nie działa, gdy zawartość dna ma zmienną wysokość, powoduje to, że wysuwa się poza granice kontenera.

— Mozfet

125

Jeśli nie martwisz się o starsze przeglądarki, użyj Flexboksa.

Element nadrzędny musi ustawić typ wyświetlania ustawiony na wygięcie

div.parent {
  display: flex;
  height: 100%;
}

Następnie ustaw element wyrównania elementu potomnego na flex-end.

span.child {
  display: inline-block;
  align-self: flex-end;
}

Oto zasób, którego się nauczyłem: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

— Lee Irvine
źródło

@bafromca, dwa powody, które nie działają. 1: Użyj „align-self” zamiast elementów do wyrównywania (moja wina, zredagowałem swój oryginalny post). 2: 100% wzrostu nie będzie działać, chyba że rodzic ma wzrost.

— Lee Irvine,

Nie działało dla mnie, chcę to na dole pojemnika, a nie na końcu przedmiotów w pojemniku.

— Mozfet

W 2020 roku powinna to być poprawna odpowiedź: caniuse.com/#feat=flexbox

— tonygatta

119

Korzystam z tych właściwości i działa!

#header {
  display: table-cell;
  vertical-align: bottom;
}

— johannchopin
źródło

42

Nie jest obsługiwany w IE8 i wcześniejszych wersjach. Jest obsługiwany w IE9.

— losowa_nazwa_użytkownika

23

@cale_b Według caniuse.com to CZY pracę w IE8.

— Zach Lysobey

5

@ZachL Happenstance - Wspieram starszą aplikację w IE8 dla klienta korporacyjnego i to w rzeczywistości działa.

— Daniel Szabo,

4

@fguillen: testowane również w Chrome (v31). Tam też działa.

— Daniel Szabo,

5

table-cellpsuje wiele rzeczy. Podobnie jak system siatki Bootstrap. col-md-12nie da Ci już dywidendy o szerokości 100%.

— Noe

65

Po pewnym czasie zmagania się z tym samym problemem, w końcu wymyśliłem rozwiązanie, które spełnia wszystkie moje wymagania:

Nie wymaga znajomości wysokości pojemnika.
W przeciwieństwie do rozwiązań względnych + absolutnych, zawartość nie unosi się na własnej warstwie (tzn. Normalnie osadza się w div kontenera).
Działa w różnych przeglądarkach (IE8 +).
Prosty do wdrożenia.

Rozwiązanie wymaga tylko jednego <div>, który nazywam „alignerem”:

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

HTML

<div class="bottom_aligner"></div>
... Your content here ...

Ta sztuczka polega na utworzeniu wysokiego, chudego diva, który wypycha linię bazową tekstu na spód kontenera.

Oto kompletny przykład, w którym osiągnięto to, o co prosił PO. Zrobiłem „bottom_aligner” grubym i czerwonym tylko dla celów demonstracyjnych.

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>

Wyrównaj dolną zawartość

— Greg Więzienie
źródło

Prawie idealnie :) ale nie pozwala na automatyczne łamanie linii.

— Gaston Sanchez

Nie działa, jeśli pojemnik zewnętrzny może się przewijać (overflow-y: auto). :(

— ecraig12345

Myślę, że marin: 8px powinien być marginesem: 8px

— Graham Perrin

2

Działa to również po umieszczeniu w ::beforeregule, która eliminuje potrzebę dodatkowego elementu. Na końcu zastosowaliśmy flex, ale jest to przydatne, gdy nie możesz.

— Owca

To naprawdę miłe rozwiązanie. Działa tylko wtedy, gdy jest ustawione heightpudełko / pojemnik i jego rodzice (na px lub% lub cokolwiek innego).

— BairDev

38

Nowoczesnym sposobem na to byłoby użycie Flexbox . Zobacz przykład poniżej. Nie musisz nawet zawijać Some text...w żaden znacznik HTML, ponieważ tekst bezpośrednio zawarty w kontenerze flex jest zawijany w anonimowy element flex.

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>

Rozwiń fragment kodu

Jeśli jest tylko trochę tekstu i chcesz wyrównać w pionie do dolnej części kontenera.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}

<section>Some text aligns to the bottom</section>

Rozwiń fragment kodu

— Naklejki
źródło

2

Potrzebowałem, aby mój wyrównany do dołu element był nadal obecny w obiegu dokumentów, co nie jest możliwe przy użyciu position:absolute;. To rozwiązanie działało idealnie w moim przypadku!

— Swen

1

Wewnątrz reagujących komponentów jest to właściwe rozwiązanie. Przyjęte rozwiązanie zawiedzie.

— Soleil - Mathieu Prévot

1

To jedyne rozwiązanie, które faktycznie dla mnie zadziałało. Być może ma to związek z React, jak wspomniał @Soleil ... Nie jestem ekspertem CSS, więc nie jestem do końca pewien.

— BK

Działa idealnie w komponencie reagowania

— 1155773

25

Elementy śródliniowe lub śródliniowe można wyrównać do dolnej części elementów poziomu bloków, jeśli wysokość linii elementu macierzystego / blokowego jest większa niż wysokość elementu śródliniowego. *

narzut:

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

* Upewnij się, że jesteś w trybie standardów

— Dougwig
źródło

25

display: flex;
align-items: flex-end;

— użytkownik3053247
źródło

2

Pamiętaj, że Flexbox nie jest dobrze obsługiwany w starych przeglądarkach.

— AnthonyB

11

@AnthonyB - zdefiniować stary? Musimy zmienić ten rekord jako deweloperzy. Technologia idzie naprzód, a stare po prostu nie przetrwają. IE9 i 10 mają problemy z flexem z tego co widzę, ale zostały wydane odpowiednio w 2011 i 2012 roku ... to 2017. Musimy puścić te przestarzałe i uszkodzone przeglądarki. Jeśli nie dla wizualnej satysfakcji, ale dla bezpieczeństwa i ogólnych aktualizacji oprogramowania.

— Tisch

3

@Tisch masz absolutną rację, że jako programiści musimy korzystać z przyzwoitej i najnowszej technologii. Ale po prostu ostrzegam o tym problemie ze zgodnością, aby się nie dziwić.

— AnthonyB

jeśli treść pod <h1>jest w <p>lub <div>chciałbym użyć justify-content: space-between.

— agapitocandemor

11

Możesz po prostu osiągnąć flex

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>

Rozwiń fragment kodu

— MK Vimalan
źródło

6

Jeśli masz wiele dynamicznych elementów wysokości, użyj wartości wyświetlanych CSS tabeli i komórki tabeli:

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

Stworzyłem tutaj demo JSBin: http://jsbin.com/INOnAkuF/2/edit

Demo zawiera również przykład wyśrodkowania w pionie przy użyciu tej samej techniki.

— romiem
źródło

5

Oto inne rozwiązanie wykorzystujące flexbox, ale bez korzystania z flex-end do wyrównania do dołu. Chodzi o to, aby zestaw margin-bottomna h1 do automatycznego przesuwania pozostałą zawartość do dołu:

#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>

Rozwiń fragment kodu

Możemy również zrobić to samo z margin-top:autotekstem, ale w tym przypadku musimy zawinąć go w a divlub span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>

Rozwiń fragment kodu

— Temani Afif
źródło

Perfecto! gracias

— Grace Nikole

4

Nie potrzebujesz do tego absolutnego + krewnego. Bardzo możliwe jest użycie względnej pozycji zarówno dla kontenera, jak i danych. Tak to się robi.

Załóż, że wysokość Twoich danych będzie x. Twój kontener jest względny, a stopka również względna. Wszystko, co musisz zrobić, to dodać do swoich danych

bottom: -webkit-calc(-100% + x);

Twoje dane zawsze będą na dole twojego kontenera. Działa, nawet jeśli masz pojemnik z dynamiczną wysokością.

HTML będzie taki

<div class="container">
  <div class="data"></div>
</div>

CSS będzie taki

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

Przykład na żywo tutaj

Mam nadzieję że to pomoże.

— Aditya Ponkshe
źródło

Czy możesz wyjaśnić, co bottom: -webkit-calc(-100% + x);się dzieje?

— mhatch,

@hatch utrzymuje stopkę na dnie pojemnika.

— Aditya Ponkshe

4

Oto elastyczny sposób na zrobienie tego. Oczywiście nie jest obsługiwany przez IE8, ponieważ użytkownik potrzebował 7 lat temu. W zależności od tego, co musisz wesprzeć, niektóre z nich można usunąć.

Byłoby jednak miło, gdyby istniał sposób na zrobienie tego bez zewnętrznego pojemnika, wystarczy po prostu wyrównać tekst w sobie.

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

— absyntyczny kowal internetowy
źródło

4

bardzo prostym, jednowierszowym rozwiązaniem jest dodanie wysokości wiersza do div, pamiętając, że cały tekst div spadnie na dół.

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>

pamiętaj, że jest to praktyczne i szybkie rozwiązanie, gdy chcesz, aby tekst w div działał w dół, jeśli potrzebujesz połączyć obrazy i inne rzeczy, musisz napisać nieco bardziej złożony i responsywny CSS

— Pablo Contreras
źródło

3

jeśli możesz ustawić wysokość zawijanego div treści (# nagłówek-treść, jak pokazano w odpowiedzi innych), zamiast całego #header, może możesz również spróbować tego podejścia:

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

pokaż na codepen

— kodeboy
źródło

3

Wydaje się działać:

HTML: Jestem na dole

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

— Plik administratora 3
źródło

3

Wszystkie te odpowiedzi i żadna nie działała dla mnie ... Nie jestem ekspertem od Flexboksa, ale było to dość łatwe do zrozumienia, jest proste i łatwe do zrozumienia i użycia. Aby oddzielić coś od reszty treści, wstaw pusty div i pozwól mu urosnąć, aby wypełnić przestrzeń.

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>

To reaguje zgodnie z oczekiwaniami, gdy dolna zawartość nie ma ustalonego rozmiaru, także gdy pojemnik nie ma ustalonego rozmiaru.

— Mozfet
źródło

3

Opracowałem sposób, który jest o wiele prostszy niż to, o czym wspomniano.

Ustaw wysokość div nagłówka. Następnie w tym stylu, stylizuj swój H1tag w następujący sposób:

float: left;
padding: 90px 10px 11px

Pracuję na stronie dla klienta, a projekt wymaga, aby tekst był na dole pewnego div. Osiągnąłem wynik przy użyciu tych dwóch linii i działa dobrze. Ponadto, jeśli tekst się rozszerzy, dopełnianie pozostanie takie samo.

— mickburkejnr
źródło

1

Powoduje, że zawartość przesuwa się nad inną zawartością podczas zmiany rozmiaru ekranów przy użyciu responsywnych układów.

— Mozfet

2

Znalazłem to rozwiązanie w oparciu o domyślny szablon startowy

/* 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;

}

— XMaster
źródło

2

#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>

Rozwiń fragment kodu

— użytkownik841657
źródło

1

Powoduje to zmianę rozmiaru górnego div. Który działa dla podstawowych układów tekstu, ale nie działa, gdy rzeczy mają tła, kolory i rozmiary do poszanowania.

— Mozfet

0

Spróbuj z:

div.myclass { margin-top: 100%; }

spróbuj zmienić%, aby to naprawić. Przykład: 120% lub 90% ... itd.

— Felix
źródło

Działa idealnie z 1 zestawem treści, ale będzie wymagać dostosowania, jeśli zawartość się zmieni. Jeśli jest to zawartość dynamiczna, nie używaj tego!

— Mike Graf

0

Witryna, którą właśnie utworzyłem dla klienta, zażądała, aby tekst stopki był wysokim polem, z tekstem na dole, który osiągnąłem przez proste wypełnienie, powinien działać dla wszystkich przeglądarek.

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

— Nicki L. Hansen
źródło

1

Twoja pierwsza deklaracja padding: 0 30pxjest nieco zbędna, równie dobrze możesz umieścić padding: 30pxinne 2 deklaracje.

— Andrew

Absolutnie prawda, jednak przestrzegam praktyk z mojego miejsca pracy.

— Nicki L. Hansen

6

Naprawdę ?, to wydaje się zwyczajną złą praktyką. Po prostu użyj skrótu lub wyrażaj się wszędzie. padding: 60px 30px 8px;, padding: 60px 30px 8px 30px;cztery wyraźne padding-zasady, a nawet sugestia @ TheWaxMann są lepsze - i jestem skłonny i mogę się z tym kłócić ;-)

— Zach Lysobey

-3

Idealnym przykładem dla różnych przeglądarek jest prawdopodobnie ten tutaj:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

Chodzi o to, aby wyświetlić div na dole, a także sprawić, aby się tam trzymał. Często proste podejście sprawi, że lepki div przewinie w górę z główną zawartością.

Poniżej znajduje się w pełni działający minimalny przykład. Zauważ, że nie wymaga żadnych sztuczek osadzania div. Wiele BR ma tylko wymusić pojawienie się paska przewijania:

<!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>

Jeśli zastanawiasz się, czy Twój kod może nie działać w przeglądarce IE, pamiętaj o dodaniu znacznika DOCTYPE u góry. Bardzo ważne jest, aby działało to w IE. Powinien to być także pierwszy tag i nad nim nic nie powinno się pojawiać.

— Fakeer
źródło

28

Ponieważ deklarujesz swój dokument jako ściśle zgodny z XHTML, powinieneś również samodzielnie zamknąć swoje <br />tagi ...

— Amos M. Carpenter,

7

@ KarlKildén, jeśli odwołujesz się do komentarza aaamos, zdecydowanie nie jest to głupi komentarz - wyświetlenie powyższego dokumentu z poprawnym content-typenagłówkiem spowodowałoby wyświetlenie przez przeglądarkę błędu analizy XML.

— Razor

7

To zła praktyka! Zamiast tego użyj CSS!

— m93a

-4

Wydaje się działać:

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

Używanie mniej sprawia, że rozwiązywanie zagadek CSS jest bardziej jak kodowanie niż jak ... Po prostu uwielbiam CSS. To prawdziwa przyjemność, gdy możesz zmienić cały układ (bez jego łamania :) po prostu zmieniając jeden parametr.

— esp
źródło

-7

Rozwiązanie z 2015 r

<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

proszę bardzo

— waza123
źródło

3

Układ tabeli w tym celu może być problematyczny; Zamiast tego zalecany jest CSS. Właściwość valign nie jest również obsługiwana w HTML5. (patrz w3schools.com/tags/att_td_valign.asp )

— undeniablyrob