音声操作パネルを固定表示する方法
ここでは、音声操作パネルを固定表示する方法について説明します。
固定表示させるには、cssで固定させたい部分にposition: fixed;を記述します。
.クラス名 {
position: fixed;
}
ただし、position: fixed;は、Internet Explorer 6 以前のバージョンでは対応していません。この場合だけが読み込む外部css を特別に作成して対応します。
- まずは、スクロールバーを非表示に
音声操作パネルを固定表示するには、まずブラウザ所有のスクロールバーを非表示にします。
html,body { overflow-y: hidden; height: 100%; } - 次に、音声操作パネルを固定させましょう
スクロールバーを非表示にしたところで、次に音声操作パネルを固定させます。
.（固定したい部分のクラス名） { position: absolute;（座標指定します） right: 16px; width: auto; }右端にスクロールバーを表示させたいので、その分の余白を確保しておきます。
- スクロールバーをつけましょう
ページ全体に新しくスクロールバーを設置します。
.（ページ全体のクラス名） { overflow-y: auto; height: 100%; } - 最後に、IE6 以前だけに外部 css（ie6.css）を読み込ませます
IE6 以前だけに読み込ませる方法として、条件分岐コメントを使用します。
下記の内容を
<head>～</head>内に挿入します。<!--[if lt IE 7]> <link rel="stylesheet" href="css/ie6.css" type="text/css" /> <![endif]-->
サンプルコード
html
<html> <head> <!--[if lt IE 7]> <link rel="stylesheet" href="css/onsei.css" type="text/css" /> <![endif]--> </head> <body> <div class="tokun"> 固定表示部分 </div> <div class="body-ie"> ページ全体の内容 </div> </body> </html>
css
html,body {
overflow-y: hidden;
height: 100%;
}
.tokun {
position: absolute;
right: 16px;
width: auto;
}
.body-ie {
overflow-y: auto;
height: 100%;
}