36

これが私が抱えている問題です:-

最大幅 960px に設定された div が 1 つあります。

div 内の div の幅は 100% に設定されていますが、100% は最大 960 ピクセルを意味します

親 div(960px) から子 div(100%) を移動せずに、960px div 内の div をユーザーの画面の 100% にするにはどうすればよいですか?

さらに明確にするために編集します。構造は次のとおりです。

 gParentDiv
    parentDiv
       myDiv

myDiv を gParentDiv と同じ幅にしたいが、parentDiv 内に保持する

お役に立てれば幸いです

4

3 に答える 3

20

ビューポートの高さと幅を使用できます。

たとえば、次のクラスは要素をビューポートのサイズにします。

.fullscreen {
    width: 100vw;
    height: 100vh;
}

jsFiddle デモ

これは純粋な CSS3ソリューションですが、ブラウザーのサポートに問題があります。

画面全体に要素を引き伸ばしたいだけの場合は、別のアプローチを使用できます。

jsFiddle デモ

.fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
于 2013-09-15T16:45:11.757 に答える
13

div を「ユーザーの画面の 100%」(ビューポート) にしたい場合は、@Itay と @Fujy の答えはどちらも正しいです。

祖父母と同じ位置 (960px) が必要な場合は、最初に祖父母 (ボディ) の寸法へのリセットを定義します。次に、祖父母と同じように子供を配置します。次のコードを検討してください。

<body>
    <div id="grandparent">
        <div id="parent">
            <div id="reset">
                <div id="child">
                </div>
            </div>
        </div>
    </div>
</body>

<body>はビューポートと同じ幅であり、祖父母はこのボディ/ビューポートに対して相対的に配置されることに注意してください。子供は祖父母と同じように配置する必要があります。最初にビューポートにリセットします: #reset ( position:absolute; left:0; right:0; }. 今では、祖父母と同じ宣言を子供に簡単に与えることができます。

body/viewport/grandgrandparent は白、祖父母はグレー、親は青、リセットは赤、子は緑です。

スクリーンショット

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        * { margin: 0; padding: 0; }

        #grandparent {
            width: 960px;
            margin: 0 auto;
            background-color: lightgray;
            height: 100vh;
        }

        #parent {
            width: 320px;
            margin-left: 480px;
            height: 100px;
            border: 1px solid blue;
            background-color: rgba(0,0,255,.30);
            padding: 12px;
        }

        #reset {
            position: absolute;
            left: 0;
            right: 0;
            border: 1px solid red;
            background-color: rgba(255,0,0,.30);
            padding: 12px;
        }

        #child { 
            width: 960px; /* same as grandparent */ 
            margin: 0 auto; /* same as grandparent */ 
            border: 1px solid green;
            background-color: rgba(0,255,0,.30);
            padding: 12px 0;

        }
    </style>
</head>
<body>
    <div id="grandparent">
        <h1>Grandparent</h1>
        <div id="parent">
            <p>The parent can be anywhere.</p>
            <div id="reset">
                <div id="child">
                    <p>Child has same position as grandparent.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

注 1: #parent { ... }and all border、backgroundandpaddingは、div を表示するためだけのものです。

注 2: y 位置は依然として親に対して相対的です。Y 軸のリセットには を使用しますtop:0; bottom:0;。

于 2013-09-15T18:28:32.487 に答える
1

absoluteポジションの使い方は？

 .child-div {
     position:absolute;
     left:0;
     right:0;
 }
于 2013-09-15T16:44:29.190 に答える