デジタル・インフォメーション/デジタル・フォー・ミー [PC等のデジタル製品の疑問、トラブル解決に]
PC・デジタル製品の疑問、困ったことを検索。
:AND検索 :OR検索
【 【CSS】スクロールバーの長さが変(?)になる。 】
更新日時:2013年4月18日(木) 16:32:05
投稿日時:2013年4月18日(木) 16:32:05
このエントリーをはてなブックマークに追加

PHPでスタイルシートの「position」を使ってエリアを固定したら
スクロールバーの長さが変になった。

ネットでどう検索してよいものかがわからなかったので
実際に実験してみた。

これはネットで検索したヘッダーなどを固定するサンプルを
使った時にうまくいかなかったことから始まる・・・。

まずこの症状(?)は
2つのPHPファイルを使用して起こった。
それぞれのPHPファイルのエンコードの種類を「UTF-8」にし、
メインPHPにはrequire_onceを記述し、自作のPHPライブラリを読み込む。
PHPライブラリにはheadの部分を記述する。
これをメインのPHPから関数でも何でも良いので読み込んで、
body部はメインに記述。

中身はbody部にヘッダーと称したエリアを作成。
その下にメインの部分を作成。
これはpositionでヘッダー部を固定、ヘッダー部の下に
body部を作成するというもの。
要するによくIDなどを常にブラウザの上部へ表示させておくという
感じのものです。

すると下記の画像のような違いが出た。
それぞれの画像の右部にでているスクロールバーに注目してください。





1の方はスクロールバーが上から下まであるのに対し、
2の方はスクロールバーがヘッダー部分より下から表示されています。

この原因…。たどりついたのは「BOM」でした。
BOMを付ける付けないという設定が影響していました。
秀丸さんなどのテキストエディタでエンコードを「UTF-8」にした時に
BOMを付けるか、付けないかを選択できます。

BOMを付けてしまうと、2になり、BOMを付けないで保存すると
1になりました。(2つのファイルともBOMを付けない)

なお、この現象は1つのファイルにソースを全部書いた場合は
起こりませんでした。(BOMの設定関係なく)

さらにBOMを付けた状態でcharsetを「UTF-8N」と書くと
Chromeでは文字がバケラッタでしたw(化け)

詳しいことはよくわかりませんが、一応、忘れないように記録。

ソースサンプルの元は
Googleで「css ヘッダー 固定」(常に表示)
でヒットするサイトさんから利用させて頂きました。
}

【 Digital Information / Digital For Me】
Copyright (C) Gontaro-Systems. All Rights Reserved.