8

2 つの子 div (ヘッダーと本文) を持つ親 div があり、上部に固定されたヘッダー位置を設定し、本文のみをスクロールする必要があります。

HTML

<div class="box">
<div class="header">Header</div>
<div class="body">Body</div>

CSS

.box {
height: 300px;
border: 1px solid #333;
overflow: auto;
}
.header {
position: absolute;
width: 100%;
height: 100px;
background: #ccc;
}
.body {
height: 300px;
background: #999;
margin-top: 101px;
}

ヘッダー div が親 div のスクロール バーと重なっていることがわかりました。ヘッダーの位置を固定したいので、親 div の位置を相対的に設定できません。このコンテンツはページの途中で利用できるため、ヘッダーの位置を「固定」として設定できません。

絶対配置された子が親のスクロールバーに重ならないようにするにはどうすればよいですか?

jsfiddle を検索: http://jsfiddle.net/T43eV/1/

4

4 に答える 4

3

オーバーフロープロパティは、.bodyではなく.box、に設定する必要があります：http: //jsfiddle.net/T43eV/8/

于 2013-03-21T21:47:47.147 に答える
1

これは役に立ちますか？

.box { position:relative; }

編集:とにかく使用する必要はありません。absoluteそれを削除しoverflow:autoて.body.

jsフィドル

.box {
    height: 300px;
    border: 1px solid #333;
}
.header {
    width: 100%;
    height: 100px;
    background: #ccc;
}
.body {
    height: 200px;
    background: #999;
    width:100%;
    overflow: auto;
}

編集:プラットフォーム間で一貫してこれを行うことはできないと思います。.header のプロパティをスクロールバーと同じ大きさに設定することでそれを行うことができますrightが、スクロールバーのサイズはオペレーティング システムにバインドされており、単一のサイズではありません。

iframeページ、スクロールバー、およびすべての中にページを作成する as を調べることができます。

于 2013-03-21T21:44:15.143 に答える
1

.header に z-index:-1 を設定すると、ヘッダーがスクロール バーに重ならなくなります。

Here is the working fiddle:

http://jsfiddle.net/T43eV/28/

于 2016-04-12T12:49:47.397 に答える