2018.01.18

CSSでoverflow:autoしたときにpadding-rightまたはpadding-bottomが効かない

overflow でスクロール可能なエリアを作った際、 padding が表示されない問題があったので少し無理やりかもしれませんが解決する方法を思いついたので紹介します。

横スクロール


<div class="parent">
  <div class="child">Child</div>
</div>


.parent {
  display: inline-block;
  padding: 1.4em;
  width: 250px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.child {
  width: 500px;
}

右にスクロールしていくと padding-right が描画されていないことが分かると思います。バグなのか仕様なのかは分かりませんが、一応解決策はあります。


.parent {
  display: inline-block;
  padding: 1.4em 0 1.4em 1.4em;
  width: 250px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.child {
  position: relative;
  width: 500px;
}
.child::before {
  position: absolute;
  top: 0;
  left: 100%;
  width: 1.4em; /* padding-right分 */
  height: 1px;
  content: '';
}

擬似要素 を使って padding-right 分の横幅を確保することで解決できます。

縦スクロール


<div class="parent">
  <div class="child">Child</div>
</div>


.parent {
  display: inline-block;
  padding: 1.4em;
  width: 250px;
  height: 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.child {
  height: 500px;
}

縦スクロールの場合も同じような問題が起きます。縦スクロールの場合は Chrome では問題ありませんでしたが、 IE では padding-bottom が描画されませんでした。


.parent {
  display: inline-block;
  padding: 1.4em 1.4em 0;
  width: 250px;
  height: 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.child {
  height: 500px;
}
.parent::after {
  display: block;
  width: 1px;
  height: 1.4em; /* padding-bottom分 */
  content: '';
}

擬似要素 を使って padding-bottom 分の領域を確保しています。横スクロールの場合は absolute で配置しましたが、縦スクロールの場合は単純にブロック要素で配置すれば大丈夫です。

CSS本執筆しました！！！

CSS本出します！1/29発売予定
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日