Q&A
動画自体のアスペクト比（つまり幅と高さの比率）は一定でしょうか？
もし、そうなら、画面幅から動画の高さが取得できます。
動画の幅と高さの比率が、1：1なら高さは100vw、2：1なら高さは50wv。
動画の幅と高さの比率が仮に2：1として、
画面全体は100vhと高さを決め打ちしているなら、
コメント部分の領域の高さは （全体 - 動画の高さ - フッターの高さ(仮に60px)）なので
height: calc(100vh - 50vw - 60px);
かな？
画面の高さ100vhに動画、文章の順で縦に並べるレイアウトを組んでいるのですが（下図）
文章の部分のみスクロールする方法が分からず、どなたが良い方法あればご教授お願い致します。
動画はデバイスによって高さが可変いたします。高さは100vhのまま固定です。
▼イメージ図
矢印の範囲をスクロールしたいです。
現段階での一部コードも載せておきます。
HTML
1<html> 2 <body> 3 <div class="video"> 4 <iframe 5 src="https://www.youtube.com…" 6 frameborder="0" 7 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 8 allowfullscreen></iframe> 9 </div> 10 11 <div class="content_wrap"> 12 <div class="content"> 13 14 <div class="comment_list"> 15 <ul> 16 <li><span class="comment">comment</span> 17 </li> 18 <li> 19 <span class="comment">comment</span> 20 </li> 21 <li> 22 <span class="comment">comment</span> 23 </li> 24 <li> 25 <span class="comment">comment</span> 26 </li> 27 </ul> 28 </div> 29 30 </div> 31 </div> 32 </body> 33</html>
scss
1html{ 2 width: 100%; 3 overflow: hidden; 4 height: 100vh; 5} 6body{ 7 height: 100%; 8 overflow: hidden; 9} 10.video{ 11 width: 100vw; 12 padding-bottom: 56.25%; 13 position: relative; 14 height: 0; 15 overflow: hidden; 16 iframe{ 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 100%; 21 height: 100%; 22 } 23} 24.comment_list{ 25 margin-top: 4%; 26 }
動画は16：9なので
height: calc(100vh - 56.25vw - 60px);ですかね。
calc()は対応ブラウザ少ないかと思って避けていましたが
結構対応してたんですね、、、
これでいこうかと思います！
ありがとうございます！
参考になったようで何よりです。
calc()が便利すぎてこれがなくては生きていけない...
もし、コードを直されたら自己解決として回答に書かれると、
他の誰かのためになるかなと思います。どうぞご検討ください。
あ、calc() IE11はまだあれこれバグがあるのでお気をつけください・・・どれがこれとは言いにくいのですが、不意にぶつかる気がします。。
そうなんですね。。
頭にいれておきます。
ありがとうございます！
回答1件
0
自己解決
marlboro_tata様にご意見いただき、以下のような対応で解決いたしました。(ありがとうございます！)
動画サイズ16：9によりスクロールする部分の高さを計算
スクロール部分＝全体の高さ - 動画の高さ - footerの高さ より
css
1.content_wrap{ 2 height: calc(100vh - 56.25vw - footerの高さ); 3 overflow: scroll; 4}
投稿2020/03/18 08:51
総合スコア39
あなたの回答
tips
プレビュー
