###やりたいこと
https://cccabinet.jpn.org/bootstrap4/sample/dashboard を参考にして
<header> ---------------------------------------------- <div.sidebar> | <div.control-area> |------------------------------- | | <div.contents> | |
こんな感じのレイアウトをくんだのですが
画面全体のスクロールを禁止にして
sidebar が縦のみ control-area に横のみのスクロールを付けたいです
ためしたこと
下のようなSCSSをかいたところ
コントロールパネルには横スクロールがついたのにサイドバーにはスクロールがついてくれません
header の縦幅がレスポンシブで変化するので高さの固定値を与えるわけにも行かず
縦 flex の flex-grow で header 以下の残りの縦幅を与えようとしたのですが
サイドバーのコンテンツが増えると container-fluid 以下がbodyの高さをこえてのびてしまいます
js で header サイズを動的に取得して無理やり高さを固定させることもできなくはないですが
CSSだけではできないのでしょうか?
理想を言えば bootstrap だけで実現したいのですが…
一応.sidebar に対して bg-color をつければ変化するのでセレクタの指定はできています
scss
1@media (min-width: 768px) { // bootstrap-md 2 body { 3 width: 100vw; 4 height:100vh; 5 display: flex; 6 flex-direction: column; 7 overflow: hidden; 8 9 & > header { 10 11 } 12 & > .container-fluid { 13 flex-grow: 1; 14 15 & > form { 16 & > .row { 17 & > .sidebar { 18 overflow-y: auto; 19 } 20 & > .main { 21 & > .control-area { 22 overflow-x: auto; 23 } 24 & > .contents { 25 26 } 27 } 28 } 29 } 30 } 31 } 32}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/09/06 08:52
2018/09/06 08:54
退会済みユーザー
2018/09/06 09:23
2018/09/06 09:30
退会済みユーザー
2018/09/06 09:58 編集