縦スクロールバーが常に表示されてしまう場合

広告

SyntaxHighlighterを使ってソースコードを表示した場合に、縦スクロールバーが常に表示されてしまう場合の対処方法について解説します。

使用しているブラウザなどによって表示のされ方は異なりますが、ソースコードを表示した時に常に縦スクロールバーが表示されてしまうことがあります。

p4-1

縦スクロールバーを非表示にするために「shCore.css」ファイルをテキストエディタで開いて次の1行を追加します。(shCore○○○.css系を読み込んでいる方は、同じように修正して下さい)。

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important;
}

設定は以上で終了です。修正後にどのように表示されるのか確認してみると縦スクロールバーが表示されなくなっています。

p4-2

Firefoxは元々表示されていませんでしたが、Chrome及びIE11では表示されなくなったことを確認しました。

( Written by Tatsuo Ikura+ )