ウィンドウサイズ幅を超える部分が切れて表示される不具合を回避する
最終更新日: Update!!
ブラウザのウィンドウサイズを超える部分が、横スクロールで表示させると切れて表示されるという現象が起こったので解決策をメモ。
【起こる条件】
・全体を囲う親要素のwidthが100%
・子要素であるコンテンツ幅が◯◯◯px指定でセンタリング配置
・ウィンドウサイズが子要素コンテンツ幅より小さく、横スクロールバーが表示される
・親要素の中に含まれる子要素の中でwidth指定なし、もしくは100%指定の要素がウィンドウズ幅で切れて表示され
【HTML】
<div id="wrap"> <div class="content-out"></div> <div class="content"></div> <div class="content-out"></div> </div>【CSS】
#wrap { width:100%; } .content { width:978px; margin:0 auto; } .content-out { width:100%; }※上記の場合、ウィンドウサイズがコンテンツ幅である978px以下の時に起こる 【対応策】 親要素である#wrapに(または切れてしまう子要素に)対して、min-widthをコンテンツ幅(この場合は978px)で値を指定すると問題なく表示される。 【CSS】(対策済み)
#wrap { width:100%; min-width:978px; } .content { width:978px; margin:0 auto; } .content-out { width:100%; min-width:978px; }
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories