青柳 臣一 ブログ(趣味系)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[CSS] overflow:auto で横スクロールバーがあるときに高さが足りなくなるのを防ぐ

引用だとかソースコードだとかの部分を枠で囲むために

<style type="text/css">
.box
{
    width:400px;
    border:1px black solid;
    padding:8px;
    overflow-x:auto;
    overflow-y:hidden;
}
.box pre
{
    margin:0px;
}
</style>

こんな CSS にしてるとします。
これで

<div class="box"><pre>...(省略)...</pre></div>

とか書けば、↓こんな感じに表示されます。

image

ところが、中身の部分が横に長いと↓みたいになっちゃいます。

image

ソースコードなんかの場合、中途半端に折り返すよりは横スクロールバーが出た方がいいかと思い、overflow-x:auto と overflow-y:hidden を使って 「縦スクロールバーは出さずに中身が収まる高さにする。横方向は収まらない場合は横スクロールを出す」 としてるわけですが、スクロールバー分だけ高さを広げるってことをしてくれないため 2行目がほとんど見えなくなっちゃってます。
IE7 ではこうなっちゃいました。
IE6 も確かこうなったような気がします。(ちゃんとは確認してないです)
Firefox はスクロールバーの高さ分だけ広がってくれるためこんなことにはなりません。
それ以外のブラウザは未確認ですが、どうやらこうなるのは IE だけみたいです。

これはあまりに見た目が悪いので何とかしたいところです。
で、以下のようにすれば一応対策できます。
検索しててどこかで見つけたんですが、どこで見つけたかは忘れちゃいました。

<style type="text/css">
.box
{
    width:400px;
    border:1px black solid;
    padding:8px;
    overflow-x:auto;
    overflow-y:hidden;
}
.box pre
{
    margin:0px;
}
</style>
<!--[if IE]>
<style type="text/css">
.box
{
    padding-bottom:1.2em;
}
</style>
<![endif]-->

前半部分は変わってません。
後半の <!-- [if IE]> から下の部分を追加しただけです。
この書き方のコメントを使うと IE の場合だけ内容が評価され、それ以外のブラウザの場合は単なるコメントとみなされます。
ですので、IE の場合だけ箱の下側が 1.2行分広くなるので↓のように 2行目が見えなくなっちゃうというのを防ぐことができます。

image

っていうか、これって横スクロールバーがあろうがなかろうが下側に 1.2行分の隙間を入れてるだけですけどね。
なので、横スクロールバーが無い時も 1.2行分広くなっちゃってます。
まぁ、隠れちゃう寄りはましってことでこういう風に対策するようにしました。

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://shinichiaoyagi.blog25.fc2.com/tb.php/84-94ace6b6
この記事にトラックバックする(FC2ブログユーザー)

overflow:autoにしているのに横スクロールバーが表示されない

FC2のレイアウトをいじっているときのお話。 ソースコードを示すときに、引用の為に私は、blockquoteを使っているのだが、 ソースが横に長す...

  • 2009/08/20(木) 12:16:28 |
  • もぐめぽろぐ

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。