divの内容を下に揃える方法

https://stackoverflow.com/questions/585945

06-09-2019
|

質問

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

#header {
  height: 150px;
}

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

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

ヘッダーのコンテンツをヘッダーセクションの下部に垂直方向に揃えて、テキストの最後の行がヘッダーセクションの下部に「貼り付く」ようにしたいと考えています。

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

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

そして、3 つの行があるとします。

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

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

解決

相対+絶対位置は、あなたの最善の策である。

#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のレイアウトを行うことができます？の

他のヒント

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>

私は、これらのプロパティを使用し、それが動作します！

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

あなたは、従来のブラウザを心配していない場合は、

フレキシボックスを使用します。

親要素が曲がるように設定された表示タイプを必要とする

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

次に、エンドを曲げるために、子要素の整列自己を設定します。

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

ここで私は学ぶために使用されるリソースです： http://css-tricks.com/snippets/css/a-guide-to-flexbox / の

しばらく同じ問題に悩まされた後、最終的に私の要件をすべて満たす解決策を見つけました。

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

解決策はたった 1 つだけです <div>, 私はこれを「アライナー」と呼んでいます。

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

これを行うには近代的な方法は、のフレキシボックスのに使用されるだろう。以下の例を参照してください。直接フレックスコンテナに含まれるテキストが匿名フレックス項目に包まれているので、あなたも、任意のHTMLタグにSome text...をラップする必要はありません。

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>

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

インラインまたはインラインブロック要素は親/ブロック要素の行の高さは、インライン要素のそれよりも大きい場合、ブロックレベル要素の底部に整列させることができる。*

のマークアップ：

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

*標準モードでは、あなたがしていることを確認してください。

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

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>

複数の動的な高さの項目がある場合は、table および table-cell の CSS 表示値を使用します。

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

ここで JSBin デモを作成しました。 http://jsbin.com/INOnAkuF/2/edit

デモには、同じ手法を使用して垂直方向に中央揃えを行う方法の例も含まれています。

ここでそれを行うにはflexy方法です。ユーザーは7年前に、必要に応じてもちろん、それは、IE8でサポートされていません。あなたがサポートするために必要なものに応じて、これらのいくつかはと離れて行うことができます。

外容器なしでこれを行う方法があった場合は、

それでも、それはいいだろう、ただのテキストは、それ自身の自己の中に自分自身を揃えています。

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

非常に単純な、1行のソリューションは、すべてのdivのテキストが下に行くことを心に持つ、DIVにラインheigthを追加することです。

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>

あなただけのdiv内のテキストがダウンしたいときに

あなたは画像やものを結合する必要がある場合、あなたは少し複雑で応答性のCSSをコーディングする必要がありますが、これは実用的で高速なソリューションであることに留意してください

これには絶対+相対は必要ありません。コンテナとデータの両方に相対位置を使用することは非常に可能です。これがやり方です。

データの高さが次のようになると仮定します。 x. 。コンテナーは相対的であり、フッターも相対的です。データに追加するだけです

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

データは常にコンテナの一番下にあります。動的な高さのコンテナがある場合でも機能します。

HTMLはこうなります

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

CSSはこうなります

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

ライブサンプルはこちら

お役に立てれば。

ここフレキシボックスを使用して、別の解決策であるが、ボトムアライメントのためのフレックスエンドを使用せず。アイデアはへの 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>

（相手の返事に示すように、＃ヘッダー・コンテンツ）あなたが代わりに全体＃ヘッダーの、コンテンツのラッピングのdivの高さを設定することができれば、多分あなたもこの方法を試すことができます：

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

codepenする

に表示

動作しているようだ。

HTML：私は一番下にあるんです。

CSSます：

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

私は、テンプレートを開始ブートストラップデフォルトに基づいて、この解決策を見つけた。

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

}

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