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>
回答1件
あなたの回答
tips
プレビュー