1

私は 1 つのコンテナーを作成<div>し、その中に 2 つ<div>のコンテナーがあります。1 つは幅 80% で、もう 1 つは幅 20% で、position:fixed.

何らかの理由で、コンテナーの合計幅が<div>ブラウザー ウィンドウよりも長くなります。

position:fixed右側の を削除すると、<div>すべてが正常になりますが、そうする必要があり<div>ますposition:fixed。

これが私のコードです：

HTML

<div class="test">
    <div class="leftSummary"></div>
    <div class="rightTasks"></div>
</div>

CSS

.test {
    width: 100%;
    display: table;
}
.leftSummary {
    width: 80%;
    display: table-cell;
}
.rightTasks {
    width: 20%;
    min-width: 275px;
    display: table-cell;
    vertical-align: top;
    position: fixed;
}
4

2 に答える 2

4

ここで基本的な問題があります。position: fixedをオンに設定すると、表示プロパティはではなく に.rightTasks計算されます。blocktable-cell

これに応じてレイアウトが変更されるため、マークアップを再考する必要があります。

参照: http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

また、 の要素は、position: fixedそれらを含むブロック要素ではなく、ビュー ポートに対して配置されます。したがって、20% の幅は、.test親ではなく、ビュー ポートに関するものです。

要素を調べる.rightTasksと、幅がテーブル幅の 20% ではなく、ビュー ポート幅の 20% であることがわかります。表の幅を 50% に設定すると、効果がより明確になります。

于 2013-10-22T11:12:30.583 に答える
0

を使用しないでくださいmin-width。

ライブデモ

編集

で使用する場合は、およびcssを使用min-widthするposition: fixed必要があります。ブラウザによる問題に遭遇したくない場合は、reset.cssを使用する必要があります。topright

ライブデモ

于 2013-10-22T11:09:53.063 に答える