divのコンテンツを一番下に揃える方法

2009年02月25日に質問されました。  ·  閲覧回数 2.1M回  ·  ソース

kristof picture
2009年02月25日

次のCSSおよびHTMLコードがあるとします。

ヘッダーセクションは固定の高さですが、ヘッダーの内容は変更される場合があります。

ヘッダーのコンテンツをヘッダーセクションの下部に垂直に配置して、テキストの最後の行がヘッダーセクションの下部に「固定」されるようにします。

したがって、テキストが1行しかない場合は、次のようになります。

 -----------------------------
 | ヘッダータイトル
 |
 |
 |
 | ヘッダーコンテンツ(1行になります)
 -----------------------------

そして、3行あった場合:

 -----------------------------
 | ヘッダータイトル
 |
 | ヘッダーコンテンツ(そうです
 | それが完璧にたくさんのもの
 | 3行にまたがる)
 -----------------------------

これはCSSでどのように行うことができますか?

回答

cletus picture
2009年02月25日
1365

相対+絶対配置が最善の策です。

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

しかし、それで問題が発生する可能性があります。 試してみると、コンテンツの下にドロップダウンメニューが表示されないという問題がありました。 かわいくないだけです。

正直なところ、垂直方向の中央揃えの問題、およびアイテムの垂直方向の配置の問題は高さが固定されていないため、テーブルを使用する方が簡単です。

例:テーブルを使用せずにこのHTMLレイアウトを実行できますか?

Patrick McElhaney picture
2009年02月25日
169

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

cletusが指摘したように、これを

<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>
Lee Irvine picture
2014年08月26日
146

従来のブラウザについて心配していない場合は、フレックスボックスを使用してください。

親要素の表示タイプをflexに設定する必要があります

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

次に、子要素のalign-selfをflex-endに設定します。

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

これが私が学んだために使用したリソースです: http

Tam Mai picture
2009年04月25日
126

私はこれらのプロパティを使用し、それは機能します!

#header {
  display: table-cell;
  vertical-align: bottom;
}
Greg Prisament picture
2014年07月19日
66

この同じ問題にしばらく苦労した後、私はついに私のすべての要件を満たす解決策を見つけました:

  • コンテナの高さを知っている必要はありません。
  • 相対+絶対ソリューションとは異なり、コンテンツはそれ自体のレイヤーにフロートしません(つまり、通常はコンテナーdivに埋め込まれます)。
  • ブラウザ間で動作します(IE8 +)。
  • 実装は簡単です。

このソリューションは、私が「アライナー」と呼んでいる<div>を1つだけ使用します。

CSS

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

html

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

このトリックは、テキストのベースラインをコンテナの下部にプッシュする、背の高い細いdivを作成することで機能します。

これは、OPが求めていたものを実現する完全な例です。 デモ目的でのみ、「bottom_aligner」を太くて赤にしました。

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>

Align bottom content

Stickers picture
2016年11月24日
42

それを行うための現代的な方法は、 flexboxを使用することSome text...をHTMLタグにラップする必要はありません。

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>

テキストが少ししかなく、コンテナの下部に垂直に配置する場合。

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>
user3053247 picture
2017年04月24日
26
display: flex;
align-items: flex-end;
dougwig picture
2012年12月05日
25

親/ブロック要素の行の高さがインライン要素の行の高さよりも大きい場合、インラインまたはインラインブロック要素をブロックレベルの要素の下部に揃えることができます。*

マークアップ:

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

*標準モードになっていることを確認してください

MK Vimalan picture
2018年05月23日
12

あなたは簡単にフレックスを達成することができます

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>
Temani Afif picture
2017年12月29日
7

これは、フレックスボックスを使用しているが、下部の位置合わせにh1のmargin-bottom自動に設定して、残りのコンテンツを一番下にプッシュすることです。

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

テキストのmargin-top:autoでも同じことができますが、この場合はdivまたは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>