3

Chrome (Mac バージョン 27.0.1453.110) のこのスクロール コンテンツにパディングが含まれているのに、Firefox (Mac 21.0) には含まれていない理由を理解しようとしています。私が使用しているのはbox-sizing: border-box;、スクロールするコンテンツの一番下にヒットすると、Chrome にはパディングがありますが、Firefox では最後の要素が一番下にあり、下にパディングはありません。代わりにマージンを使用する必要がありますか? これはいずれかのブラウザのバグですか?

私はcodepenの例を持っています

CSS: 

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
  background-color: #222;
}

p {
 padding-bottom: 20px; 
}

.boxy {
  background-color: #111;
  border: 4px solid #FFFFFF;
  height: 442px;
  overflow: auto;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 722px;
}

.inside-boxy {
  background-color: #ff6000;
  height: 160px;
  padding: 12px 50px 50px 28px;
  position: absolute;
  overflow-y: scroll;
}

.in-links {
  background-color: #fff;
  height: 132px;
  margin-top: 22px;
  width: 600px;
 }

HTML: 

<html>

  <head>
    <title>Paul Irish Box Model FTW</title>
    <meta charset="utf-8">
  </head>

  <body>

    <div class="boxy">

      <div class="inside-boxy">
        <p>...</p>
        <p>...</p>
        <div class="in-links">links!</div>
      </div>

    </div>

  </body>

</html>
4

1 に答える 1

0

.inside-boxy の高さは固定です。そのコンテナを介してパディングを発行しません。代わりに、.inside=boxy に固有のコンポーネントのパディングとマージンのプロパティを発行します。以下のCSSを書き直しました。問題がある場合はお知らせください。

       p {
 padding:20px; 
}

.boxy {
  background-color: #111;
  border: 4px solid #FFFFFF;
  height: 442px;
  overflow: auto;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 722px;
}

.inside-boxy {
  background-color: #ff6000;
  height: 160px;
  position: absolute;
  overflow-y: scroll;
  width:100%;
}

.in-links {
  background-color: #fff;
  height: 132px;
  margin:20px 0 20px 0;
  width: 100%;
 }
于 2013-07-01T04:14:14.673 に答える