Q&A
タイトル通りのことをしたいのですが
現状のコードとして
html
1<body> 2<div class="flex"> 3 <div class="flex-item1"> 4 <iframe name="menu" scrolling="no" src=""></iframe> 5 </div> 6 <div class="flex-item2"> 7 <iframe name="content" scrolling="no" src=""></iframe> 8 </div> 9</div> 10</body>
css
1 html,body{ 2 margin: 0; 3 padding: 0; 4 border: 0; 5 background-color: grey; 6 } 7 .flex{ 8 display:flex; 9 position:absolute; 10 width:100%; 11 height:100%; 12 border:2px solid red; 13 } 14 15 iframe{ 16 width:100%; 17 height:100%; 18 border:none; 19 } 20 .felx-item1{ 21 flex-basis:10%; 22 } 23 .flex-item2{ 24 flex-basis:90%; 25 }
これだと、図が画面の下の部分になるのですが、flexの高さよりbodyの高さの方大きい
また、iframeを削除して、.flexだけ残す場合でもうまくいかない
html
1<body> 2<div class="flex"> 3</div> 4</body>
css
1 html,body{ 2 margin: 0; 3 padding: 0; 4 border: 0; 5 background-color: grey; 6 } 7 .flex{ 8 display:flex; 9 position:absolute; 10 width:100%; 11 height:100%; 12 border:2px solid red; 13 }
これだと、画面いっぱいより大きくなっている、そのしょうことしてスクロールバーが縦横に出てるのです
なので、flexをbodyと同じ高さにするためにはどうすればいいのでしょうか
回答2件
0
html
1<html> 2<body> 3 4<div class="flex"></div> 5 6</body> 7</html>
css
1html, body { 2 margin: 0; 3 padding: 0; 4 border: 0; 5 background-color: gray; 6} 7.flex { 8 box-sizing: border-box; 9 display: flex; 10 position: absolute; 11 width: 100%; 12 height: 100%; 13 border: 2px solid red; 14}
box-sizing プロパティに border-box を指定すると、border 分まで width や height 内に含まれるようになります。
投稿2019/07/17 05:41
総合スコア248
0
こういうこと？
css
1.flex{ 2 display:flex; 3 position:absolute; 4 width:calc(100% - 4px); 5 height:calc(100% - 4px); 6 border:2px solid red; 7}
投稿2019/07/17 05:11
総合スコア114814
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。