ソリッドレイアウトとリキッドレイアウトの混在

Question

同じページ内において、
ヘッダー、フッターはソリッドレイアウトで固定幅指定、
中身のコンテンツ部分はリキッドレイアウトで可変にすることは可能でしょうか？

そのような実装をしてみたところ、デベロッパーツールでコンテンツ部分の右側に余白ができました。
デベロッパーツールでなく、ブラウザ（Windows10、chrome）でそのまま表示してみると不自然には見えない。
（幅を縮めていくとヘッダー・フッターはそのまま動かず、コンテンツ部分は可変で縮まっていく）

でもタブレット実機で見てみると、デベロッパーツールのような余白が出来ます。

そもそも、ソリッドレイアウトとリキッドレイアウトを混在させて表示させることは出来るのでしょうか。
出来るのであれば、実装方法教えていただきたいです。

※画像ぼかしています。

Comments

[Lhankor_Mhy]

「ヘッダー、フッターはソリッドレイアウトで固定幅指定、中身のコンテンツ部分はリキッドレイアウトで可変」ということは、ウィンドウサイズによっては、ヘッダーよりもコンテンツ部分の方が幅が広くなる、という理解でいいでしょうか？

[退会済みユーザー]

ありがとうございます！

コンテンツ部分の最大幅は指定しています。（1200px）
ヘッダー・フッターの固定幅も1200px。

それ以下に縮めた時に可変になるという感じです。

[Lhankor_Mhy]

とすると、ご提示のスクリーンショットでは、ヘッダーフッターもコンテンツも可変幅、つまり全てリキッドレイアウトになっている、という理解でよろしいですか？

[Lhankor_Mhy]

あ、いや、違うのかな？　「それ以下に縮めた時に可変になる」のはコンテンツ部分だけという意味ですか。
理解しました。

[退会済みユーザー]

スクリーンショットでは、検証ツールで画面幅を1200pxから少し縮めた状態（850pxくらい）になっています。
なので、ヘッダーフッターが1200pxで固定されていて、
コンテンツが可変で縮んで右に余白ができています。
（うまく説明できずスミマセン(>_<)）

[退会済みユーザー]

>「それ以下に縮めた時に可変になる」のはコンテンツ部分だけという意味ですか。
そうです！

Answer 1

そもそも、ソリッドレイアウトとリキッドレイアウトを混在させて表示させることは出来るのでしょうか。

出来るのであれば、実装方法教えていただきたいです。

可能です。
幅をpxなどの絶対単位で指定すればソリッドレイアウト、%などの相対単位で指定すればリキッドレイアウトになります。

つまり、ソリッドレイアウトにしたい要素にはpx単位で幅を指定、リキッドレイアウトにしたい要素は%単位で幅を設定すればいいでしょう。

ただ、混在させると画面サイズによってはバランスが悪くなる可能性があるので一般的には採用しないと思います。

そのような実装をしてみたところ、デベロッパーツールでコンテンツ部分の右側に余白ができました。

それが再現できるコードを提示してもらわないと、解決法の提示は難しいですね。

Comments

[退会済みユーザー]

回答ありがとうございます！
取り急ぎ出来るかどうかを知りたかったため、コード提示できずに申し訳ございませんでした。

>混在させると画面サイズによってはバランスが悪くなる可能性があるので一般的には採用しない
確かに、横スクロールが発生するとなるとリキッドレイアウトの利点である可読性も良くない気がします。

回答いただきありがとうございました！

Answer 2

こんな感じでしょうか。
横スクロールが発生してしまうので、あまりいいデザインとは思えないですが……
サンプルを置いておきます。

https://jsfiddle.net/Lhankor_Mhy/nezm8624/

    body {
      display: grid;
      grid: auto-flow / 100%;
      justify-items: center;
    }

    header,
    footer {
      width: 1200px;
    }

    main {
      max-width: 1200px;
      width: 100%;
    }

Comments

[退会済みユーザー]

サンプルまでいただいてありがとうございます！！

header, footer, main　の指定は同じです。
やはり、デザイン的に横スクロール発生、右側に余白が出きてしまうのは必須ということのようですね。

このようなレイアウトが混在したサイトが初めてだったので、どうしたものかと悩んでおりました。
大変助かりました！
ありがとうございました！