4

ページに目次があり (こちらを参照)、これらの CSS スタイルを使用しています。

div.toc {
    height:38em;
    position:fixed;
    right:0;
    top:5em;
    width:21em;
    z-index:1;
}

DIV が body/window スクロール バーの後ろに部分的に隠れていないことを確認するには、これらの設定をどのように変更する必要がありますか?

(Firefox 3.6 および Opera 10.10 でテスト済み)。

4

2 に答える 2

8

実際、あなたdiv.tocは適切に配置されています。問題はあなたにあります<iframe>。

ボックスモデルを覚えておいてください...幅と高さは、マージンとパディングとは別に計算されます...

W3C ボックスモデル

したがって、width: 100%;plus iframe.tocamargin-left: 0.5emを使用することで、基本的にブラウザに次のように伝えます。

親要素の全幅を使用0.5emし、左にオフセットします。
総有効幅: 100% + 0.5em

あなたが本当に言いたいことは次のとおりです。

0.5em左側のパディングとして使用する親要素の全幅から減算し、これを幅として使用します。
総有効幅: 100% - 0.5em (望ましい)

したがって、解決策は簡単です... margin-leftfromiframe.tocを削除してpadding-left: 0.5emon にしdiv.tocます。

div.toc {
    background-color: #f0f0f0;
    position: fixed;
    top: 5em;
    right: 0;
    width: 21em;
    height: 38em;
    padding-left: .5em;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    z-index: 1;
}

iframe.toc {
    background-color: #f0f0f0;
    border: 0;
    width: 100%;
    height: 30em;
    border-bottom: 1px solid #ccc;
}
于 2010-05-13T18:41:11.027 に答える
2

次のように、目次の位置を右から 1 em にすることができます。right: 1em;

私はあなたのためにそれを試してみましたが、よさright: 1em;そうです。

于 2010-05-13T17:34:10.420 に答える