質問編集履歴

1 下の要素の説明

mitsuru793

mitsuru793 score 155

2016/11/26 16:10  投稿

CSSでスクロールバーを隠そうとすると、バーの上にバーの高さ分の空白ができてしまう
最後に貼ったHTMLでは、CSSでスクロールバーを隠しています。Chromeで上のボックスを、トラックパッドで横スクロールできることが確認できると思います。
上の要素はwidthを200%にしています。下の要素は100%なので横スクロールはできません。overflow: hiddenにして画面全体が動いていないことを確認するために、下の要素を置いています。  
方法としては、ラッパーをoverflow: hiddenにして、子のスクロール要素のスクロールバーをpadding-bottomで親からはみ出させて隠しています。この時、スクロール要素の高さを100pxと明示的に設定する場合は、要素の高さは親一杯になり問題はないのですが、heigth: 100%とすると、要素の下に謎の白い領域が出来てしまいます。
(下記画像の赤枠のことです。実際に赤枠は表示されません。アプリで赤枠はつけました。)
![イメージ説明](c7844bcd470a85d3c0da28353f7ccecb.png)
最初は、この赤枠はスクロールバーなのかと思いましたが違いました。バーの高さは15pxで、margin-bottomを15px以下に下げていくと、下からバーが出てくるのが見えます。そして赤枠の空白は徐々に狭まっていくことが確認出来ました。
スクロール要素である.scroll_xのheigthを100%にすれば、親の高さ100pxまで広がり、そこからさらにpadding-botomでバーを隠せると思いましたが、それが出来ません。この理由を教えて頂ければ幸いです。
どうぞよろしくお願い致します。
```html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>タブ</title>
<style>
* {
 margin: 0;
 padding: 0;
}
.scroll {
 height: 100px;
 width: 100%;
 overflow: hidden;
}
.scroll__x {
 height: 100%;
 overflow-x: auto;
 overflow-y: hidden;
 padding-bottom: 30px;
}
#content1 {
 height: 100%;
 width: 200%;
 background-color: rgb(50, 50, 100);
 color: white;
}
#content2 {
 width: 100%;
 height: 100px;
 background-color: rgb(100, 40, 40);
 color: white;
}
</style>
</head>
<body>
 <div class="scroll">
   <div class="scroll__x">
     <div id="content1">
       <p>Amet ut at repellat veritatis ex Deleniti cumque amet distinctio asperiores consequuntur animi. Laboriosam error enim ullam reprehenderit placeat? Repudiandae voluptatibus ratione voluptatum at quo facere pariatur nostrum deleniti Velit</p>
     </div>
   </div>
 </div>
 <div id="content2">
   <p>Amet ut at repellat veritatis ex Deleniti cumque amet distinctio asperiores consequuntur animi. Laboriosam error enim ullam reprehenderit placeat? Repudiandae voluptatibus ratione voluptatum at quo facere pariatur nostrum deleniti Velit</p>
 </div>
</body>
</html>
```
  • HTML

    14772 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9918 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    3328 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る