html - css 要素の最下部

divの内容を一番下に揃える方法は? (16)

#header全体ではなく、コンテンツの折り返し部分の高さ（他の返信に示されているヘッダーの内容）を設定できる場合は、この方法を試してみてください。

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に表示

次の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でどのようにすることができますか？

2015溶液

<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

どういたしまして

フレックスボックスを使用し、ボトムアライメントにフレックスエンドを使用しない別の解決策がここにあります。考え方は、 h1の margin-bottomをautoに設定して残りのコンテンツを一番下にプッシュすることです。

#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でも同じことができますmargin-top:autoテキストのmargin-top:autoですが、この場合divまたはspan中にラップする必要があり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>

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

データの高さを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);
}

ここでのライブ例

お役に立てれば。

ここでそれを行うためのフレキシブルな方法があります。もちろん、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;
}

この同じ問題でしばらくの間苦労した後、私は最終的に私のすべての要件を満たすソリューションを見つけました。

私はコンテナの高さを知る必要はありません。
relative + absoluteソリューションとは異なり、コンテンツはそれ自身のレイヤーで浮動しません（つまり、コンテナdivに通常埋め込まれます）。
ブラウザ間で動作します（IE8 +）。
簡単に実装できます。

このソリューションは1つの<div>取ります。これを "aligner"と呼んでいます：

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>

働いているようだ：

HTML：私は一番下にいます

CSS：

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

働いているようだ：

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: [email protected]_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;
}

lessを使うとCSSパズルを解決することができます。私はCSSが大好きです。 1つのパラメータを変更するだけでレイアウト全体を変更することができます（それを壊すことなく:)。

完璧なクロスブラウザの例はおそらくこれです：

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

アイデアは、下部にdivを表示し、そこに固執することも両方です。多くの場合、単純な方法では、スティッキーdivをメインコンテンツにスクロールさせます。

以下は完全に機能する最小限の例です。 divの埋め込みトリッキーは必要ありません。多くのBRはスクロールバーを強制的に表示するだけです：

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

あなたのコードがIE上で動作していないのではないかと疑問に思っているなら、一番上にDOCTYPEタグを付けてください。これがIE上で動作するためには不可欠です。また、これは最初のタグであり、その上に何も表示されません。

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

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

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

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

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

私が習ったリソースは次のとおりです： http://css-tricks.com/snippets/css/a-guide-to-flexbox/ : http://css-tricks.com/snippets/css/a-guide-to-flexbox/

私がちょうどクライアントのために行ったサイトでは、フッターのテキストがハイボックスであることを要求しました。テキストは最下部にあり、単純なパディングでこれを達成しました。すべてのブラウザで動作するはずです。

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

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

私は、この解決策がデフォルトのブートストラップ開始テンプレート

/* 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 {
  display: table-cell;
  vertical-align: bottom;
}

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

マークアップ：

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

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

非常にシンプルな、1行の解決策は、すべてのdivのテキストが下に行くことを念頭に置いて、divにline-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をコーディングする必要があります

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

html - css 要素 の 最 下部

divの内容を一番下に揃える方法は? (16)

html - css 要素の最下部