Q&A
お世話になります。
CSS Gridを使ったレイアウトで困っています。
HTML
1<body> 2 <header> 3 ヘッダ部分 4 </header> 5 <section id="left"> 6 大きい写真を左半分に。ボタンを押したらここにメニューが出現 7 </section> 8 <section id="main"> 9 articleタグでくくってメインコンテンツを並べる 10 </section> 11 <footer> 12 サイトマップとコピーライト 13 </footer> 14</body>
という構成で、例えば東京農業大学のサイトのように、常時上端にヘッダ・下端にフッタ(農大のサイトでは、フッタはスクロールした下端に右半分)を表示して、#leftはスクロールせずに#main部分のみをスクロールさせるべく
CSS
1@charset "utf-8"; 2body{ 3 position:relative; 4 display:grid; 5 grid-gap:10px; 6 grid-template-columns:1fr 1fr; 7 grid-template-rows:64px auto 24px; 8} 9header{ 10 grid-column:1/3; 11 grid-row:1/2; 12 background-color:#a12032; 13} 14section#left{ 15 grid-column:1/2; 16 grid-row:2/3; 17} 18section#main{ 19 grid-column:2/3; 20 grid-row:2/3; 21 overflow-y;scroll; 22 overflow-x:hidden; 23} 24footer{ 25 grid-column:1/3; 26 grid-row:3/4; 27 text-align:right; 28 background-color:#a12032; 29}``` 30と書いてみたところ、上端にヘッダ、下端にフッタが表示されて、間に#leftと#mainが挟まれるところまでは良かったのですが、#mainのみをスクロールさせることができません。 31どのようなCSSを書くのが正解でしょうか。
回答1件
0
ベストアンサー
overflowと合わせてheightを指定するのが簡単だと思います。
section#main{ grid-column:2/3; grid-row:2/3; overflow-y;scroll; overflow-x:hidden; height: calc(100vh - 150px); }
上記ではheightを画面いっぱいの100vhからヘッダーとフッターの分150px（どの程度の高さになるのか不明のため一旦仮置きしてみました）を引いたものとしています
投稿2018/01/01 16:07
総合スコア271
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/01 16:24