CSS で、一部の div の高さを固定、残りの div は 1 : 2 の高さにする、といった指定は可能でしょうか？

CSS で、高さはウィンドウサイズの高さいっぱいにして、
以下のように高さを指定することは可能でしょうか？

1段目 : 200px 固定
2段目 : 残りの 1 / 3 の高さ
3段目 : 残りの 2 / 3 の高さ

(XAML でいう Grid タグの、1*, 2* のような指定のイメージです)

※ 試しに以下のように書いてみても、% は親要素の高さに対する割合なので、
全体が 100% + 200px の高さになってしまいます。

※ Bootstrap のバージョンは 4.0.0 です。

html
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6    <link rel="stylesheet" href="css/bootstrap.min.css">
7    <title>Hello</title>
8    <style>
9        html { height:100%; }
10        body { height:100%; margin:0; }
11        div.h200 { height:200px; overflow:scroll; background-color:red; }
12        div.h1s  { height:33%;   overflow:scroll; background-color:green; }
13        div.h2s  { height:66%;   overflow:scroll; background-color:yellow; }
14    </style>
15</head>
16<body>
17
18<div class="container-fluid" style="height:100%;background-color:lightyellow">
19    <div class="container-fluid h200"><div class="col">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a</div></div>
20    <div class="container-fluid h1s"><div class="col">b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b</div></div>
21    <div class="container-fluid h2s"><div class="col">c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c<br>c</div></div>
22</div>
23
24
25<script src="js/jquery-3.3.1.min.js"></script>
26<script src="js/bootstrap.bundle.min.js"></script> 
27</body>
28</html>

s8_chu

2019/03/17 14:08 編集

Bootstrap のバージョンを質問文に追記していただけませんか？また、ウィンドウサイズの高さをはみ出すテキストの量だったときは、どのような動作にを期待しているのですか？

tanishi_a

2019/03/17 14:17

・失礼しました！追記しました。読み込んでいた Bootstrap は 4.0.0 です・各 div 内でスクロールされることを期待していました

行動規範の内容に同意します

回答1件

ベストアンサー

計算してしまうとかどうでしょう。

【calc() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/calc

投稿2019/03/17 14:02

kei344

総合スコア69407

tanishi_a

2019/03/17 14:09

早い！ありがとうございます！目的の動作になりました！ ```html <style> html { height:100%; } body { height:100%; margin:0; } div.h200 { height:200px; overflow:scroll; background-color:red; } div.h1s { height:calc((100% - 200px)/3*1); overflow:scroll; background-color:green; } div.h2s { height:calc((100% - 200px)/3*2); overflow:scroll; background-color:yellow; } </style> ```

s8_chu

2019/03/17 14:13 編集

横から失礼します。 Bootstrap 4.2.1 以降を使っているならば、 Bootstrap に組み込まれたクラスのみで、目的の動作が実現出来ると思います。もし、解決に用いた方法では思うような動作にならなかったときは、一度試してみてください。

tanishi_a

2019/03/17 14:20

ありがとうございます！さっき最新だと思って落としたのがうっかり 4.0.0 だったので、最新を Download して試してみます！

行動規範の内容に同意します