QA@IT

Firefox height100%時のスクロールについて

4670 PV

以下は解決済みですが、同様の問題に見舞われている方の参考になるよう残しておきます。コメントを頂いたflied_onion様申し訳ありませんでした。
////////////////////////////////////////////////////////////////////////////
CSSについて質問です。

下記コードheader#sidebarのスクロールバーに関してなのですが、Chrome等WebKit系ブラウザでは問題なくsidebar内のlong text...のはみ出し部分をスクロール表示できるのですが、Firefoxでスクロールが出来ない問題に見舞われています。

下記コードでスクロールバーの表示自体はされているのですが、#sidebarのheightをpxで指定しないとスクロールが出来ません。height100%のままWebkit系ブラウザ同様に動作させるにはどうしたらよいか、お分かりの方がおりましたらご教授頂けないでしょうか。

HTML

<body>
 <div id="wrapper">
  <div class="outer">
   <div class="inner">
    <div id="container">
     <header id="sidebar">
       long text...
     </header>
    </div>
   </div>
  </div>
 </div>
</body>

CSS(誤)

スクロールバー自体は表示されるがFireFoxではスクロール不可。(WebKitでは動作する)

#wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: #999;
}
.outer {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}
.inner {
  display: table-cell;
  text-align: center;
  height: 100%; /* firefox */
}
#container {
  display: inline-block;
  width: 960px;
  height: 100%;
  background: #fff;
}
header#sidebar {
  overflow-y: scroll;
  width: 300px;
  height: 100%;
  background: #000;
  text-align: left
}

CSS(正)

header#sidebarのpositionを絶対位置への配置とし、topとbottomに0を入れることで解決

#sidebar {
  overflow-x: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 300px;
  background: #000;
  text-align: left;
}
  • できればどう解決したかまたは注意点など記載された方がよいかと。削除できないのは誰が解決したとしても他の誰かの参考になるかもしれないからですので。 -
  • いえ、更新していただいてありがとうございます。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。