これが のコードです。上記のレイアウトを実現するために使用しています。
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.sidebar {
width: 140px;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
}
.column {
padding: 20px;
border-right: 1px solid #999;
}
<div class="header">Main header</div>
<div class="body">
<div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="column">Column 1</div>
<div class="column">Column 1</div>
<div class="column">Column 1</div>
</div>
</div>
</div>
スタイル設定に使用したコードを省略しました。あなたはそれをすべてペンで見ることができます。
上記は機能しますが、content
領域の内容がオーバーフローすると、ページ全体がスクロールします。コンテンツ領域自体をスクロールさせたいだけなので、 content
div にoverflow: auto
を追加しました。
これの問題点は、柱自体が両親の高さを超えて伸びていないため、境界もそこで途切れていることです。
子をcontent
ボックスの高さを超えて拡張しながら、content
領域を個別にスクロールするように設定するにはどうすればよいですか?
これについて Tab Atkins (flexbox仕様の著者)と話しましたが、これが思いついたものです。
HTML:
<div class="content">
<div class="box">
<div class="column">Column 1</div>
<div class="column">Column 1</div>
<div class="column">Column 1</div>
</div>
</div>
CSS:
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
min-height: min-content; /* needs vendor prefixes */
display: flex;
}
ペンは次のとおりです。
これが機能する理由は、align-items: stretch
が固有の高さを持っている場合、min-content
によってアイテムが縮小されないためです。
多くの試行錯誤の末、この問題を非常にエレガントに解決しました。
私のブログ記事をチェックしてください。 http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout
基本的には、flexboxセルをスクロール可能にするには、すべての親overflow: hidden;
を作成する必要があります。そうしないと、オーバーフロー設定が無視され、親が大きくなります。
flex
と共にposition:absolute;
を扱う:フレックスアイテムをposition: relative
で配置します。それからその中に、別の<div>
要素を追加します:
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
これは、要素をその相対位置の親の境界まで拡張しますが、それを拡張することはできません。内部では、overflow: auto;
は期待通りに動作します。
.all-0 {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
p {
text-align: justify;
}
.bottom-0 {
bottom: 0;
}
.overflow-auto {
overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="p-5 w-100">
<div class="row bg-dark m-0">
<div class="col-sm-9 p-0 d-flex flex-wrap">
<!-- LEFT-SIDE - ROW-1 -->
<div class="row m-0 p-0">
<!-- CARD 1 -->
<div class="col-md-8 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/700x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
<!-- CARD 2 -->
<div class="col-md-4 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/400x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
</div>
<div class="row m-0">
<!-- CARD 3 -->
<div class="col-md-4 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/400x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
<!-- CARD 4 -->
<div class="col-md-4 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/400x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
<!-- CARD 5-->
<div class="col-md-4 p-0 d-flex">
<div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
<img class="img img-fluid" src="https://via.placeholder.com/400x250">
<h4>Heading 1</h4>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
</div>
</div>
</div>
</div>
<div class="col-sm-3 p-0">
<div class="bg-white m-2 p-2 position-absolute all-0 d-flex flex-column">
<h4>Social Sidebar...</h4>
<hr />
<div class="d-flex overflow-auto">
<p>
Topping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
Pudding cupcake danish Apple pie Apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream
chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halvafruitcake ice cream chocolate
bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish Apple pie Apple pie. Halva
</div>
</div>
</div>
</div>
がんばろう...
少し遅れますが、これは役に立ちます: http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269
基本的にはhtml
、body
をheight: 100%;
に置き、あなたのすべてのコンテンツを<div class="wrap"> <!-- content --> </div>
にラップする必要があります。
CSS:
html, body {
height: 100%;
}
.wrap {
height: 100vh;
display: flex;
}
私のために働きました。それが役に立てば幸い
これを追加:
align-items: flex-start;
.content {}
のルールへ。それは私のためにあなたのペンの中で、少なくとも(FirefoxとChromeの両方で)それを修正します。
デフォルトでは、.content
にはalign-items: stretch
があります。これは、 http://dev.w3.org/csswg/css-flexbox/に従って、すべての自動高さの子のサイズをそれ自身の高さに合わせます#algo-stretch 対照的に、値flex-start
は子供たちに彼ら自身の高さを計算させ、そして開始Edgeで自分自身を整列させます(そしてオーバーフローしてスクロールバーをトリガーします)。