2

ので、私は持っています：

    <body style="border:1px solid red;width:100%;">
        <div style="position:absolute;left:2000px;">
            1
        </div>
    <body>

この場合、内部ウィンドウの幅の 100% ではなく、ドキュメントの 100% の幅 (「スクロール スペース」を含む) にする方法はありますか? 「幅：2000px;」を適用したかのように結果が必要です。体に、しかしこの数を知らずに。

jsで1行のコードが必要であることはわかっていますが、純粋なcssでこれを行うことができるかどうか疑問に思っています。

明確にするために：「幅：100％;」と書くとき 本体の幅は最大 2000px (絶対に配置された div を含めるため) まで伸びると思いますが、1024px (ブラウザー ウィンドウの幅) までしか伸びません。

4

3 に答える 3

3

このレイアウトには論理的なパズルがあります。

<body style="background:red;width:100%;">
    <div style="position:absolute;left:2000px;">
       1
    </div>
<body>

内部divは絶対配置されているため、ドキュメント フローの外にあるため、親ブロック コンテナー は<body>、絶対配置された子要素に基づいて幅を計算できません。

に 100% のパーセンテージ幅を割り当てる<body>と、ルート要素 (この場合は ) の幅に基づいて幅が実際に計算<html>され、ビューポートから高さを継承する場合があります。

この効果は、CSS だけでは実現できません。

内側の div を絶対的に配置する必要がある場合は<body>、指定するカスタム ルールに基づいて幅を決定する JavaScript/jQuery 機能が必要になります。

于 2013-07-05T15:36:33.290 に答える
1

問題は、次のように別のものを内側にposition: absoluteラップすることです。div

<body style="border:1px solid red;width:100%;">
    <div style="width:2000px;">
        <div style="position:absolute;left:2000px;">
            1
        </div>
    </div>
<body>

絶対要素を作成すると、もはや親に属さず、ドキュメント内の別の要素になるためです（ドキュメントフロー内）。この答えがあなたの望むものでない場合は、正確に何をしたいのか (あなたの設計上の決定は何か) を教えてください。そうすれば、問題を解決するための代替設計を提供できます。

于 2013-07-05T16:54:43.877 に答える