スクロールさせないWebページの作り方

###前提・実現したいこと
全てのコンテンツを画面サイズ内に収め、画面の横・縦スクロールをすることなくユーザに使用してもらえるようなWebページを考えています。
例としては下記のようなサイトです。

NIKEiD
(ナイキの靴をカスタマイズするWebページです)

上記サイトはブラウザの横・縦幅を変更してもそれに合わせてコンテンツが画面サイズに合うようにレイアウトされます。
横幅はBootstrapのグリッドシステム等で可変にできないこともないと思うのですが、縦幅で手こずりそうです。

考えられる実現方法としてはdivのheightを細かに%指定してやる方法などがあると思うのですが、ある程度構築してしまったレイアウトに対してこの方法を実践するのはかなり困難だと考えています（始めからやるにしてもかなり手間な気はしますが…）。

上記リンク先のようなサイトを構築するにはどういった手法が考えられるでしょうか？
何かご回答を頂けると助かります_(..)

###追記
上記リンク先で、右側の「カスタマイズ」から対象のページに遷移できます。

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

回答2件

ベストアンサー

参考サイト拝見しました。
こういったレイアウトは工夫が必要ですね。
ブレークポイントもいくつか設定しないと駄目だと思いますが、左の大きなスライドショーの親要素が75%幅、
右側の縦スクロールスライド部が25vwの幅指定になっています。なぜ%とVWを併用しているのかは置いておいて
上記幅で親要素を固定し、右側縦スライド部はheightを100%とし、overflowをスクロールに。
左側大スライド部はwidth:75%の要素に対して、縦幅に画像を合わせたスライドショーを設置すれば良いわけで、
割と簡単にできると思います。
大画像が正方形で、ブラウザの縦幅に合わせているところがキモだと思います。

投稿2017/02/22 08:09

shaak

総合スコア607

tarotarosu

2017/02/27 12:38

ありがとうございます！参考にさせていただきます(( _ _ ))

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

レイアウト設計はflex使うと便利ですよ。

html
1<!--Bootstrap4基準-->
2
3...
4
5<body class="d-flex">
6  <!--ほげほげ-->
7</body>
8
9...
10

css
1html, body {
2  width: 100vw;
3  height: 100vh;
4  padding: 0;
5  margin: 0;
6}
7
8body {
9  /*タッチデバイスやmacでスクロールされないようにする*/
10  overflow: hidden;
11}