高さを固定して幅をウィンドウサイズに合わせる方法

esty

参考サイト：

https://teratail.com/questions/114034

高さを固定した状態でウィンドウサイズを小さくすると下記画像のように幅がどんどん狭くなり空白ができてしまう。

キャプチャ

解決方法：
以下をcssに貼り付けて、index.htmlで、bodyの中身をwrapperで全体を囲む。

style.css

// bodyの幅がウィンドウサイズに合わせて可変するようになる
body {
   margin: 0px auto;
   padding: 0px;
}

#wrapper {
   margin: 0px auto;
   overflow: hidden;
}

index.html

<body>
   <div id="wrapper">
    
　　～～～～
    
   </div>
</body

結果：
高さを固定しても幅がウィンドウサイズに合わせて可変するようになる。

キャプチャ

理屈としては、bodyとwrapperが中央寄せになるため、幅が可変するようになるのではないかと考えているが、合っているかわからない。

いいなと思ったら応援しよう！