
ウィンドウサイズ幅を超える部分が切れて表示される不具合を回避する
ブラウザのウィンドウサイズを超える部分が、横スクロールで表示させると切れて表示されるという現象が起こったので解決策をメモ。
【起こる条件】
・全体を囲う親要素の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;
}
categories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)