Box mit Rand auf voller Breite des Fensters

Ich habe ein Problem mit dem einfachen Layout. Es sollte wie folgt aussehen:Box mit Rand auf voller Breite des Fensters

mein Code wie folgt aussehen:

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    color: white; 
 
} 
 
#black{ 
 
    background: black; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#grey{ 
 
    background: grey; 
 
    width: 100%; 
 
    margin: 2em; 
 
}

<body> 
 
    <div id="black"> 
 
    <p>something</p> 
 
    <div id="grey"> 
 
     <p>2#something</p> 
 
    </div> 
 
    </div> 
 
</body>

Leider ist dieser Weg falsch ist, weil eine Bildlaufleiste angezeigt. Ich brauche eine reaktionsfähige Lösung.

Quelle

2016-07-02 docze

ich Ihre Frage mit einer Erklärung beantwortet haben, können Sie einen Blick für die Zukunft übernehmen wollen – dippas

einfach nicht setzen eine Breite auf #grey, und entfernen Sie den rechten Rand:

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    color: white; 
 
} 
 
#black{ 
 
    background: black; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#grey{ 
 
    background: grey; 
 
    margin: 2em; 
 
    margin-right:0; 
 
}

<body> 
 
    <div id="black"> 
 
    <p>something</p> 
 
    <div id="grey"> 
 
     <p>2#something</p> 
 
    </div> 
 
    </div> 
 
</body>

Seit #grey ist ein div, und ein Blockelement standardmäßig wird es füllen der verfügbare Platz.

Quelle

2016-07-02 14:08:02

Tatsächlich ist die akzeptierte Antwort ist „irgendwie“ falsch, da in nicht unter die collapsing margins zählen, die vorhanden sind, aufgrund p sie standardmäßig mit

oben und unten margins Blöcke werden manchmal kombiniert (zusammengebrochen) in eine einzige margin, deren Größe ist die größte der kombinierten Rand kombiniert, ein Verhalten bekannt als Randkollaps.

So sollten Sie padding und margin

body, 
 
p { 
 
    margin: 0; 
 
    color: white; 
 
} 
 
#black { 
 
    background: black; 
 
    width: 100% 
 
} 
 
#grey { 
 
    background: grey; 
 
    padding: 2em 0 2em 2em; 
 
    margin: 2em 0 0 2em; 
 
}

<body> 
 
    <div id="black"> 
 
    <p>something</p> 
 
    <div id="grey"> 
 
     <p>2#something</p> 
 
    </div> 
 
    </div> 
 
</body>

Quelle

2016-07-02 14:55:24 dippas

Box mit Rand auf voller Breite des Fensters

Antwort

Verwandte Themen