Jak wyrównać zawartość div do dołu
Powiedzmy, ż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>Sekcja nagłówka ma stałą wysokość, ale zawartość nagłówka może się zmieniać.
Chciałbym, aby zawartość nagłówka była wyrównana pionowo do dołu sekcji nagłówka, więc ostatnia linia tekstu "przykleja się" do dołu sekcji nagłówka.
Więc jeśli jest tylko jedna linijka tekstu, będzie to tak:
----------------------------- | Header title | | | | header content (resulting in one line) -----------------------------
I gdyby były trzy linie:
----------------------------- | Header title | | header content (which is so | much stuff that it perfectly | spans over three lines) -----------------------------
Jak można to zrobić w CSS?
26 answers
Względne + absolutne pozycjonowanie jest najlepszym rozwiązaniem:
#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>Szczerze mówiąc, w przypadku problemów z centrowaniem pionowym i, cóż, wszelkie problemy z wyrównaniem pionowym z elementami nie są stałą wysokością, łatwiej jest po prostu korzystać z tabel.
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-09-20 11:21:41
Użyj CSS pozycjonowanie:
/* 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ć treść 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>
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
2019-07-19 21:11:03
Jeśli nie martwisz się starszymi przeglądarkami, użyj flexbox.
Element nadrzędny musi mieć ustawiony typ wyświetlania na flex
div.parent {
display: flex;
height: 100%;
}
Następnie ustawiasz element potomny align-self 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/
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
2020-04-19 10:52:53
Używam tych właściwości i to działa!
#header {
display: table-cell;
vertical-align: bottom;
}
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
2020-04-19 10:52:10
Po jakimś czasie zmagałem się z tym samym problemem, w końcu wymyśliłem rozwiązanie, które spełnia wszystkie moje wymagania: {]}
- nie wymaga, żebym znał wysokość kontenera.
- W przeciwieństwie do rozwiązań względnych + absolutnych, zawartość nie unosi się w swojej warstwie (tzn. Zwykle osadza się w kontenerze div).
- działa w przeglądarkach (IE8+).
- prosty w implementacji.
Rozwiązanie zajmuje tylko jeden <div>, który nazywam "aligner": {]}
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
html
<div class="bottom_aligner"></div>
... Your content here ...
Ta sztuczka działa poprzez tworzenie wysokiego, chudego div, który popycha linię bazową tekstu na dno kontenera.
Oto kompletny przykład, który osiąga to, o co prosiła operacja. Zrobiłem" bottom_aligner " gruby i czerwony tylko do 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>
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
2016-05-26 12:27:46
Nowoczesnym sposobem na to byłoby użycie flexbox. Zobacz przykład poniżej. Nie musisz nawet owijać Some text... w żaden znacznik HTML, ponieważ tekst bezpośrednio zawarty w kontenerze flex jest owinięty anonimowym elementem 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>Jeśli jest tylko jakiś tekst i chcesz wyrównać pionowo do dołu 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>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-01-15 19:59:24
display: flex;
align-items: flex-end;
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-04-24 04:53:07
Elementy Inline lub inline-block mogą być wyrównane do dołu elementów blokowych, jeśli wysokość linii elementu nadrzędnego / blokowego jest większa niż wysokość elementu inline.*
Znaczniki:
<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 standardowym
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
2016-02-09 10:24:03
Można 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>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
2018-05-23 06:08:28
Oto inne rozwiązanie przy użyciu flexbox, ale bez użycia flex-end do wyrównania do dołu. Chodzi o to, aby ustawić margin-bottom na h1 na auto , aby wypchnąć pozostałą zawartość na dół:
#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>Możemy również zrobić to samo z {[5] } na tekście, ale w tym przypadku musimy zawinąć go wewnątrz div lub 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>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 22:01:09
Jeśli masz wiele elementów o dynamicznej wysokości, użyj wartości wyświetlania CSS table i table-cell:
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 demo JSBin tutaj: http://jsbin.com/INOnAkuF/2/edit
Demo zawiera również przykład, jak wyrównać środek w pionie przy użyciu tej samej techniki.
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
2016-02-09 10:32:06
Możesz użyć następującego podejścia:
.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>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
2020-07-22 11:51:16
Nie potrzebujesz do tego bezwzględnego+względnego. Jest to bardzo możliwe przy użyciu pozycji względnej zarówno dla kontenera, jak i danych. Tak to się robi.
Załóżmy, ż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 będą zawsze na dole twojego kontenera. Działa nawet jeśli masz kontener o dynamicznej wysokości.
HTML będzie jak to
<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);
}
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-02-06 12:49:56
Oto elastyczny sposób, aby to zrobić. Oczywiście nie jest obsługiwany przez IE8, ponieważ użytkownik potrzebował 7 lat temu. W zależności od tego, czego potrzebujesz do wsparcia, niektóre z nich można usunąć.
Mimo to, byłoby miło, gdyby istniał sposób, aby to zrobić bez zewnętrznego kontenera, po prostu mieć tekst wyrównany sam 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;
}
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
2016-06-07 20:33:12
Bardzo prostym, jednoliniowym rozwiązaniem jest dodanie wiersza-heigth do div, mając na uwadze, że cały tekst div pójdzie na dno.
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 wewnątrz div poszedł w dół, jeśli chcesz połączyć obrazy i rzeczy, będziesz musiał kodować nieco bardziej złożony i responsywny CSS
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
2018-02-01 13:17:23
Wszystkie odpowiedzi i żadna nie zadziałała... Nie jestem ekspertem od flexbox, ale to było dość łatwe do zrozumienia, jest proste i łatwe do zrozumienia i użycia. Aby oddzielić coś od reszty zawartości, Wstaw pusty div I pozwól mu rosnąć, 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 jest stała wielkość również wtedy, gdy pojemnik nie jest stała wielkość.
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
2019-05-16 14:36:35
Jeśli możesz ustawić wysokość owijania div zawartości (#header-content 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;
}
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
2014-07-12 07:28:33
Wydaje się działać:
HTML: Jestem na dole
Css:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
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
2016-02-22 19:17:50
Wymyśliłem sposób, który jest o wiele prostszy niż to, co zostało wspomniane.
Ustawia wysokość nagłówka div. Następnie w środku, styl tag H1 w następujący sposób:
float: left;
padding: 90px 10px 11px
Pracuję nad stroną dla klienta, a projekt wymaga, aby tekst był na dole określonego div. Osiągnąłem wynik za pomocą tych dwóch linii i działa dobrze. Ponadto, jeśli tekst się rozszerzy, wypełnienie nadal pozostanie takie samo.
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
2019-07-19 21:22:14
Znalazłem to rozwiązanie oparte na domyślnym szablonie startowym bootstrap
/* 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;
}
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
2016-11-09 09:42:44
#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>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-10-23 00:41:23
Spróbuj z:
div.myclass { margin-top: 100%; }
Spróbuj zmienić%, aby to naprawić. Przykład: 120% lub 90%...itd.
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-01-21 03:51:55
Strona, którą zrobiłem dla klienta, wymagała, aby tekst w stopce był wysokim polem, z tekstem na dole osiągnąłem to za pomocą prostego wypełnienia, powinno działać dla wszystkich przeglądarek.
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
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
2016-02-09 10:29:03
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życie less sprawia, że rozwiązywanie zagadek CSS jest bardziej podobne do kodowania niż podobne... Po prostu kocham CSS. To prawdziwa przyjemność, gdy można zmienić cały układ (bez jego łamania:) po prostu zmieniając jeden parametr.
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-01-04 14:44:31
Doskonałym przykładem między przeglądarkami jest prawdopodobnie ten tutaj:
Http://www.csszengarden.com/?cssfile=/213/213.css&page=0
Chodzi o to, aby zarówno wyświetlać div na dole, jak i sprawić, by się tam przykleił. Często proste podejście sprawi, że lepki div przewija się w górę z główną treścią.
Poniżej znajduje się w pełni działający minimalny przykład. Zauważ, że nie jest wymagane osadzanie div trickery. Wiele BRs są po prostu wymusić scrollbar do appear:
<!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ę, że Twój kod może nie działać na IE, pamiętaj, aby dodać tag DOCTYPE na górze. Ważne jest, aby to działało na IE. Ponadto powinien to być pierwszy znacznik i nic nie powinno pojawić się nad nim.
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-05-30 07:07:47
2015 rozwiązanie
<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
Twoje powitanie
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-01-10 22:56:34