web-dev-qa-db-ja.com

Divを下から上に積み重ねる

divsを固定高さのdivに追加すると、子divが上から下に表示され、上の境界に固定されます。

┌─────────────────────────┐
│ Child Div 1             │
│ Child Div 2             │
│                         │
│                         │
│                         │
└─────────────────────────┘

私は今、このように下から上に表示しようとしています（下の境界線に貼り付けます）：

┌─────────────────────────┐
│                         │
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
└─────────────────────────┘
┌─────────────────────────┐
│                         │
│                         │
│ Child Div 1             │
│ Child Div 2             │
│ Child Div 3             │
└─────────────────────────┘
┌───────────────────────┬─┐
│ Child Div 2           │▲│
│ Child Div 3           │ │
│ Child Div 4           │ │
│ Child Div 5           │█│
│ Child Div 6           │▼│
└───────────────────────┴─┘

など...私が言っていることを理解してほしい。

これはCSSで簡単に実行できますか（vertical-align: bottom）？または、JavaScriptで何かをハッキングする必要がありますか？

htmlcssscrollbarvertical-alignmentalignment
130
Wulf

すべての回答は、質問のscrollbarポイントを逃しています。そして、それは難しいものです。これが最新のブラウザでのみ動作する必要があり、IE 8+であれば、テーブルの配置、vertical-align:bottomおよびmax-heightを使用できます。 [〜＃〜 ] mdn [〜＃〜] 特定のブラウザー互換性のため。

デモ（vertical-align）

.wrapper {
  display: table-cell;
  vertical-align: bottom;
  height: 200px;
}
.content {
  max-height: 200px;
  overflow: auto;
}

html

<div class="wrapper">
  <div class="content">
     <div>row 1</div>
     <div>row 2</div>
     <div>row 3</div>  
  </div>
</div>

それ以外は、CSSだけでは不可能だと思います。 position:absoluteを使用して要素をコンテナの下部に貼り付けることができますが、フローから要素を削除します。結果として、それらは伸縮せず、コンテナをスクロール可能にします。

デモ（位置絶対）

.wrapper {
  position: relative;
  height: 200px;
}
.content {
  position: absolute;
  bottom: 0;
  width: 100%;
}
44
gblazex

これに対するより現代的な答えは、flexbox。を使用することです

他の多くの最新の機能と同様に、 レガシーブラウザーでは動作しません なので、IE8-9時代のブラウザーのサポートを終了する準備ができていない限り、別の方法を探す必要があります。

方法は次のとおりです。

.parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.child {
  /* whatever */
}

必要なのはそれだけです。 flexboxの詳細については、 [〜＃〜] mdn [〜＃〜] を参照してください。

基本的なスタイリングを使用したこの例を次に示します。 http://codepen.io/Mest/pen/Gnbfk

35
Nils Kaspersson