divを下から上に重ねる


139

高さを固定divしてに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で何かをハッキングする必要がありますか?

回答:


46

すべての回答は、質問のスクロールバーポイントを逃しています。そして、それは難しいものです。あなたが唯一の近代的なブラウザとIE 8+のために仕事にこれを必要とする場合は、テーブルの配置を使用することができ、vertical-align:bottomそしてmax-height。特定のブラウザーの互換性については、MDNを参照してください。

デモ (垂直配置)

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

そして、overflow-y:autoコンテナのための
venimus

@venimus-コンテナーの高さがposition:absolute子の影響を受けないため、無効なスクロールバーが表示されます。
gblazex 2011年

よくあなたのソリューションは質問の一部であるスクロールバーを表示しません
venimus

答えを更新しました。最新のブラウザー(IE 7以降)でスクロールバーの問題を回避できます。
gblazex 2011年

1
回答ありがとうございます。ラッパーがうまく機能します。
ウルフ

38

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

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

方法は次のとおりです。

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

.child {
  /* whatever */
}

そして、それだけで十分です。の詳細についてはflexboxMDNを参照してください。

これは、いくつかの基本的なスタイリングを使用したこの例です。http//codepen.io/Mest/pen/Gnbfk


すばらしい回答、ありがとうございました!フレックスボックスについてはまだ聞いていませんが、本当に面白いですね。
ウルフ2013

4
これは順序を逆にしますが、それらを親の最下部に引き下げません。
エドワードアンダーソン

@nilbus、詳しく説明してもらえますか?私の以前のテストと添付の例でさえ、確実に親要素の一番下まで引き下げられているようです。
Nils Kaspersson、2014

私は間違っているようです。おそらく、私のために機能しないようにするための矛盾したスタイルがあるのでしょう。ありがとう!
エドワードアンダーソン

サンプルコードで見つけた、これを機能させる.parent {position:fixed;}があります。また、デモのスクロールはChomeでは機能しません。次のものが必要です。.parant {-webkit-flex:1 1 auto; overflow-y:auto; min-height:0px;}と固定位置を削除
Ng

1

CSSトランスフォームを使用してこれをアーカイブできます。

そのためのコードペンを作成しました。 https://codepen.io/king-dev/pen/PoPgXEg

.root {
  transform: scaleY(-1);
}
.root > div {
  transform: scaleY(-1);
}

最初にルートを水平に反転し、次に直接の子divを再び反転するという考え方です。

注:上記の方法でもdivの順序が逆になります。単にそれらを下から開始するように配置したい場合は、以下を実行できます。

.root {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow-y: auto;
}
.root > div:first-child {
  margin-top: auto;
}

0

それをoldskoolに保つ...

私はで同じことをやってみたかった#header のdiv私は空の状態で作成してdiv要素と呼ばれるが#headspace、上にスタック(の内側にそれを置きます#header):

<div id="header">
    <div id="headspace"></div>
    <div id="one">some content</div>
    <div id="two">other content</div>
    <div id="three">more content</div>
</div> <!-- header -->

次に、非表示のdivの高さをパーセンテージで使用して、他の#headspace divを押し下げました。これを正しく行うために、ブラウザの開発者/インスペクタツールを使用するのは簡単です。

#header {
    width: 100%;
    height: 10rem;
    overflow: auto;
}

#headspace {
    width: 100%;
    height: 42%;    /* Experiment with Inspect (Element) tool */
}

#one, #two, #three {
    /* Insert appropriate dimensions for others... */
}

これは、フィックスコンテンツがある場合にのみ機能します。動的なコンテンツがあり、多くのdivがレンダリングされるかわからない場合、これは機能しません。
Sajid Ali

それは私が使用したほんの少しのソリューションでした。動的コンテンツの必要性について具体的な言及はありませんでした-私が知っている限りでは、ページdivが追加されるたびにページが完全に更新されます。したがって、誰かが実際により静的なソリ​​ューションを望んでいる場合に備えて、これをここに配置します。つまり、反対票よりも票がゼロの方が適切だと思います。
veganaiZe

時間を割いて、静的なコンテンツで回答を提供していただきありがとうございます。私はそれを尊重します。質問はChild Div #、子divが増加している動的コンテンツを明確に示しています。一定の高さまで増加すると、スクロールが表示されます。したがって、この回答は実際の質問に対する解決策を提供しません。
サジッドアリ2018

0

メッセージフローが下から上に流れるチャットアプリのように、bootstarpでこれを機能させたい

ものを読んだ後、私はこれを見つけました

私は外側のdivがクラス.outerDivを想定し、次にUI、リストを想定しています

.outerDiv {
    height: 361px;
    position: relative;
}
ui.msg-content{
    width: 100%;
    bottom: 0;
    position: absolute;
    max-height: 98%;
    overflow-y: auto;
}

ここに画像の説明を入力してください

ここに画像の説明を入力してください



-5
<div style="height: 500px;">
    <div style="height: 20px; position: absolute; bottom: 120px;">Child Div 1</div>
    <div style="height: 20px; position: absolute; bottom: 100px;">Child Div 2</div>
    <div style="height: 20px; position: absolute; bottom: 80px;">Child Div 3</div>
    <div style="height: 20px; position: absolute; bottom: 60px;">Child Div 4</div>
    <div style="height: 20px; position: absolute; bottom: 40px;">Child Div 5</div>
</div>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.