コンテナーの下部にdivを配置するにはどうすればよいですか？

741

次のHTMLがあるとします。

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
スニペットを展開

私は希望#copyrightの底に固執します#container。

絶対配置を使用せずにこれを達成できますか？floatプロパティが 'bottom'の値をサポートしている場合、それでうまくいくように見えますが、残念ながらそうではありません。

html  css 
— ドナル
ソース
211
この状況は、レイアウトテーブルがまだなくなっていない理由の1つです。テーブルでこれを行うのは非常に簡単で、どこでも機能します。CSSでこれを行うのは非常に難しく、ブラウザ間のサポートはまあまあです。それを正しく行う方法を覚えておくことは不可能であることは言うまでもありません。
— Tomalak、2009
質問が理解できません。なぜ絶対配置を使用する必要があるのですか？コンテナには、内容に関係なく、高さが設定されていますか？
— HartleySan 2013

回答:

924

おそらくそうではない。

割り当てposition:relativeへ#container、その後position:absolute; bottom:0;に#copyright。

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
スニペットを展開

— ユーザー
ソース
11
コンテナーのposition：relativeでデザインが壊れる場合は、コンテナー内に高さ100％のラッパーdivを含めるだけで、代わりにposition：relativeを追加できることに注意してください。
— ジャックシェパード
そしてそれが繰り返し要素のためであるならば、そうでなければお互いの上に配置されますか？
— CRice
6
絶対位置の要素は、その位置を決定するために、絶対位置または相対的位置である最も近い親を探します。すべてが失敗した場合は、本体（ウィンドウ）を使用します。したがって、親が相対的である必要があります。
— user17753
1
#containerにマージンの下を追加して、ページコンテンツの著作権を防止します
— Doc Kodam
1
以下のフレックスボックスのアプローチははるかに優れています。
— woohoo
345

実際、@ Userが受け入れた回答は、ウィンドウが高く、コンテンツが短い場合にのみ機能します。ただし、コンテンツが高く、ウィンドウが短い場合は、ページのコンテンツの上に著作権情報が表示され、下にスクロールしてコンテンツを表示すると、フローティングの著作権表示が表示されます。そのため、このソリューションはほとんどのページ（実際にはこのページのような）では役に立たなくなります。

これを行う最も一般的な方法は、「CSSスティッキーフッター」アプローチのデモ、または少しスリムなバリエーションです。このアプローチはうまく機能します-高さが固定されたフッターがある場合。

コンテンツが短すぎる場合はウィンドウの下部に表示され、ウィンドウが短すぎる場合はコンテンツの下部に表示される可変高さのフッターが必要な場合、どうしますか？

プライドを飲み込み、テーブルを使用します。

例えば：

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>
スニペットを展開

やってみて。これは、あらゆるブラウザのあらゆるウィンドウサイズ、コンテンツ量、フッター、IE6でも機能します。

レイアウトにテーブルを使用することを考えている場合は、少し時間をとってその理由を自問してください。CSSは私たちの生活をより簡単にするためのものでした-そして全体的には-ですが、実際には、これらすべての年の後でさえ、それはまだ壊れた、直感に反する混乱です。すべての問題を解決できるわけではありません。それは不完全です。

テーブルはクールではありませんが、少なくとも今のところ、デザインの問題を解決するための最良の方法である場合があります。

— リック・ライリー
ソース
80
私にとって最良の答えのようです。さらに、htmlテーブルの代わりに、常に「cssテーブル」（表示：table [-row / -cell]）を使用できます。これは、セマンティクスなしで同じレイアウトを提供します。
— チコドロ
1
ページを生成するPHPスクリプト/その他のスクリプトがある場合は、1つを非表示の「スペーサー」として使用し、もう1つを絶対位置に配置して、フッターを複製できます。スペーサーフッターは、フッターにどれだけのコンテンツが含まれていても、ページを上に移動しないようにします。
— Tyzoid 2013
20
これらのコメントを読んでいる他の人にとって：これは「プライド」や「クール」であることとは何の関係もありません。レイアウトにテーブルを使用することは、特に大量のコンテンツの場合、実用的にさらに面倒です。コンテンツを追加するときに、tdを見逃さないようにし、あまり関係のないマークアップをふるいにかけることは地獄です。レイアウトだけでなくHTML ドキュメントを作成しているのは痛い原因です。ドキュメントのコンテンツのほとんどが表形式のデータでない場合、なぜそれをテーブルに配置するのでしょうか。意図された方法でWebテクノロジーを使用したくない場合は、なぜそれらを使用するのですか？代わりにデスクトップ/モバイルアプリを使用してコンテンツを公開する
— gabe 2013
1
@chiccodoro驚くほど最小限のテーブルレス同等物を実装しました。以下の私の答えを確認してください
— Hashbrown
59
プライドは無関係です。アクセシビリティ上の理由により、テーブルをレイアウトに使用しないでください。スクリーンリーダーを使用したことがある場合は、表を表形式のデータのみに使用する必要がある理由がわかります。@chiccodoro状態としてcssテーブルを使用します。
— Matt Fellows
171

フレックスボックスアプローチ！

ではサポートされているブラウザは、次のように使用することができます。

ここの例

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

コードスニペットを表示

上記のソリューションはおそらくより柔軟ですが、ここに代替ソリューションがあります：

ここの例

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

コードスニペットを表示

補足として、追加のサポートのためにベンダープレフィックスを追加することができます。

— ジョシュ・クロジエ
ソース
3
column-reverse親についてはどうですか？子供に何も追加する必要はありませんか？
— Max Waterman
1
これはおそらく受け入れられる答えになるはずです。ハッキングや絶対的な位置付けはなく、オーバーフローは必要なときにきれいに機能します（私にとっては）
— 副詞
114

はい、absolute配置せずに、tables を使用せずにこれを行うことができます（マークアップなどでねじ込みます）。

デモ
これは、IE> 7、Chrome、FFで動作するようにテストされており、既存のレイアウトに追加するのは本当に簡単です。

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>
#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

float:bottom@Rick Reillyの回答で指摘された問題を考慮に入れても、効果的に何が行われます！

— ハッシュブラウン
ソース
1
いいね！<!DOCTYPE>これはIEで機能するためにIIRCのセットが必要です（少なくとも8以下）。これらの古いバージョンdisplay:table-XXXは「標準」モードでのみサポートされます。しかし、標準モードは、たとえばIE6用に設計された多くのページを壊します。
— デビッド
3
また、フレキシボックスを使用することができます- stackoverflow.com/questions/526035/...
— ジョシュ・クロージャー
2
でもっと幸運を見つけました.foot{display: table-footer-group}。私は必要としなかったvertical-align、heightまたはborder-collapse。
— Jacob Valenta 2015
これは、他のコンテンツが#container含まれ#footておらず、含まれていない場合に機能しますか？
— Solace 2015年
少なくとも必要があるだろうと思われる改行なしスペース、@Solace
— Hashbrown
20

古い質問ですが、これはいくつかのケースで役立つユニークなアプローチです。

純粋なCSS、絶対配置なし、高さ固定なし、クロスブラウザ（IE9 +）

そのワーキングフィドルをチェックしてください

通常のフローは「上から下」である#copyrightため、ある種の絶対的な配置をせずにdivに親の下部にくっつくように単純に要求することはできませんが、divを親#copyrightの上部にくっつけたい場合は、これは通常のフロー方法であるため、非常にシンプルになります。

したがって、これを有利に使用します。divHTMLのの順序を変更します。これで#copyrightdivが一番上になり、コンテンツはすぐに続きます。また、コンテンツdivを完全に引き伸ばします（疑似要素とクリア技術を使用）。

現在は、ビューでその順序を逆にするだけです。これはCSS変換で簡単に行うことができます。

コンテナを180度回転し、up-is-downを実行します。（そして、コンテンツを元に戻し、通常の外観に戻します）

コンテンツ領域内にスクロールバーを配置する場合は、CSSマジックをもう少し適用する必要があります。示しすることができるようにここでは [この例では、コンテンツは、ヘッダの下にある-が、その同じ考え]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>
スニペットを展開

— アヴラハムクール
ソース
2
いいえ、レンダリングがいかにひどいのか見てくださいi.stack.imgur.com/ZP9Hw.png
— grg
7

div上記の要素用に別のコンテナを作成します#copyright。ただ、著作権上の新しいを追加しますdiv： <div style="clear:both;"></div> それは強制的にフッターを相対位置を使用した場合には同じように、他のすべて下に（bottom:0px;）。

— ラプリ・アンドラス
ソース
7

これを試して;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

— ゲイリー・グリーン
ソース
1
@Feelsbadmanそのような答えで他の人々のコードを変更しないでください。CSSをHTMLから切り離すだけの場合は、誤ってコードを別のコードに変更したため、回答が無効になり、投稿者の意図が確実に変更された可能性があります。
— TylerH
6

ここで提供された回答のいずれも私の特定のケースに適用または機能するようには見えませんでしたが、このきちんとしたソリューションを提供するこの記事に出くわしました：

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

ウェブサイトのすべてのhtmlコードを並べ替える必要なく、モバイルディスプレイにレスポンシブデザインを適用するのに非常に便利です。 bodyて、テーブルとして。

最初のtable-footer-groupまたはだけがそのtable-header-groupようにレンダリングされることに注意してください：複数ある場合、他は次のようにレンダリングされますtable-row-groupます。

— スキッピールグラングロウ
ソース
6

CSSグリッド

CSSグリッドの使用が増えているので、私は提案したいと思います align-self、グリッドコンテナー内の要素します。

align-self値のいずれかを含めることができますend、self-end、flex-end以下の例のために。

#parent {
  display: grid;
}

#child1 {
  align-self: end;
}

/* Extra Styling for Snippet */

#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}

#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}
<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>

</div>
スニペットを展開

— マノジクマール
ソース
5

のテキスト配置機能の使用について知っている場合alignは、実際にボックスをbottom使用せずに使用position:absoluteできます。height#containerinline-block要素の。

ここでは、実際の動作を確認できます。

これはコードです：

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}
— jacmkno
ソース
5

translateYおよびtopプロパティの使用

要素の子を位置：相対に設定し、上に移動する：100％（つまり、親の100％の高さ）に移動し、変換によって親の下部に固定する：translateY（-100％）（つまり、高さの-100％）子供）。

利点

  • あなたはしていないページフローから要素を取ります
  • ダイナミックです

しかし、まだ回避策:(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

古いブラウザのプレフィックスを忘れないでください。

— サムエル
ソース
4

CodePenのリンクはこちら。

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}
<div class="overlay">
    <div class="container">
        <div class="height">
            content
        </div>
    </div>

    <div class="footer">
        footer
    </div>
</div>
スニペットを展開

— アジザルスラン
ソース
3

コンテナーの高さに関係なく、それを下部に「固定」したい場合は、絶対配置が適しています。もちろん、copyright要素がコンテナの最後の場合は、とにかく常に一番下になります。

あなたの質問を拡張できますか？あなたが何をしようとしているのか（そしてなぜ絶対配置を使いたくないのか）を正確に説明してください？

— ジャック・スライト
ソース
2

また、position:absolute;またはを使用した規定があるposition:relative;場合は、いつでもpadding 親 を試すか、をdiv置くことができますmargin-top:x;。ほとんどの場合、あまり良い方法ではありませんが、場合によっては便利です。

— ゴーストエコー
ソース
1

多分これは誰かを助けるでしょう：あなたはいつも他のdivの外側にdivを置き、そして負のマージンを使ってそれを上方に押すことができます：

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>
— DesignConsult
ソース
1 

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
スニペットを展開

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
スニペットを展開

— アンモル・ラタン・モーラ
ソース
1

下部のスティッキーフッターに「position：absolute」を使用したくない。それからあなたはこのようにすることができます：

 html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }
<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>
スニペットを展開

— ニレシュ・パワル
ソース
こんにちは、ニレシュ。このソリューションはすでに複数の回答で提供されています。新しい質問を提供する前に、質問に対する既存のすべての回答を必ず読んで、内容の重複がないことを確認してください！
— TylerH
1

子ブロックの高さがわからない場合：

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}
<div id="parent">
    <div class="child">child
    </div> 
</div>
スニペットを展開

http://jsbin.com/ULUXIFon/3/edit

子ブロックの高さがわかっている場合は、子ブロックを追加し、次にpadding-top / margin-topを追加します。

#parent {
    background:green;
    width:200px;
    height:130px;
    padding-top:70px;
}
.child {
    background:red;
    vertical-align:
    bottom;
    height:130px;
}
<div id="parent">
    <div class="child">child
    </div> 
</div>
スニペットを展開

— zloctb
ソース
0

これがまったく言及されていないからといって、通常はあなたのような状況でうまく機能します：

container-divの後に copyright-divを配置する

copyright-divを他のコンテナーと同じ方法（同じ全体の幅、中央揃えなど）でフォーマットするだけでよく、すべて問題ありません。

CSS：

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML：

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

これが理想的ではない唯一の場合は、container-divがで宣言されているheight:100%場合であり、ユーザーは下にスクロールして著作権を確認する必要があります。しかし、それでも回避できます（たとえばmargin-top:-20px、著作権要素の高さが20pxの場合）。

  • 絶対配置なし
  • テーブルレイアウトなし
  • 他のすべてのブラウザーで異なるように見えるクレイジーなCSSはありません（少なくとも、IEはそうですね）
  • シンプルで明確なフォーマット

さておき：OPが「...「コンテナー」divの底にくっついている」という解決策を求めていたのはわかっていましたが、その下にはありませんでしたが、ここで人々は良い解決策を探しています。 1であります！

— レビテ
ソース
OPの場合には、このソリューションは#copyrightは、固定高さであれば（そして、あなたが設定することができます唯一の良いですmargin-top: -{element height}。
— Gajus
@Gajus：これは絶対位置でも固定位置でもありません。これは、OPが要求することを正確に実行します（著作権の高さに関係なく）。ただし、copyright-divが最初のコンテナーに含まれていないという唯一の例外があります。OPは、著作権をページではなくコンテナの下部に貼り付けるよう求めました!!
— Levite 2014年
申し訳ありませんが、＃containerのコンテナの高さが固定されているとは限りません。
— Gajus 2014年
私が誤解しない限り、OPが解決しようとしている実際の問題は、要素の高さが別の要素によって指示されている場合（たとえば、コメントjsbin.com/acoVevI/3）、要素の下部です。ここでは、ボタンをコンテナの外に置くことはできません。この問題をさらに説明するには、jsbin.com / acoVevI / 4を参照してください。
— Gajus 2014年
OPは、「＃copyrightを#containerの下部に貼り付けてほしい」と述べたため、これは質問から完全に明確ではありません。さらに、これは単に「#containerの下部にくっつく」必要がある場合に有効な例です。このソリューションは役立つはずであり、クリーンなアプローチがあり、多くのレイアウトでうまく機能します。たとえば、stackoverflow.comのような、コンテンツがスクロールするページ;-)
— Levite
0

ここでは、既知の高さと幅（少なくともおよそ）を持つ要素を右にフロートさせ、下に留め、他の要素へのインライン要素として動作させることを目的としたアプローチを示します。他の方法で他のコーナーに簡単に配置できるため、右下に焦点が当てられています。

レイアウトを乱すことなくバー自体が適切に引き伸ばされるようにしながら、右下に実際のリンクとランダムな兄弟要素を持つナビゲーションバーを作成する必要がありました。「シャドウ」要素を使用してナビゲーションバーのリンクのスペースを占有し、コンテナの子ノードの最後に追加しました。

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>
— Zyox
ソース
0

コンテナに子が1つしかない場合は、table-cellおよびvertical-alignアプローチを、単一のdivをその親の下部に配置するために確実に機能しました。

table-footer-group言及した他の回答として使用すると、親の高さの計算が壊れることに注意してくださいtable。

#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}
<div id="container">
    <div id="item">Single bottom item</div>
</div>
スニペットを展開

— ハイ・チャン
ソース
0

によると：w3schools.com

位置を持つ要素：絶対; （固定のようにビューポートに相対的に配置されるのではなく）、最も近くに配置された祖先に相対的に配置されます。

したがって、親要素を相対または絶対などで配置し、目的の要素を絶対に配置し、後者を下部を0に設定する必要があります。

— ジョナス・フレイレ
ソース
これは、（とりわけ）受け入れられた回答ですでに言及されています。
— TylerH
-1

スタイルのDiv position:absolute;bottom:5px;width:100%;は機能していますが、より多くのスクロールアップ状況が必要です。

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}
— すてきな
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.