Ich versuche eine Website Vorlage zu erstellen, wo das Haupt #content div 75% der Breite des Bildschirms ist, und zentriert auf der Seite, aber ich möchte auch gelegentlich haben Abschnitte, die sich über die gesamte Breite des Ansichtsfensters erstrecken. Die Art und Weise, wie ich das erreicht habe, besteht darin, eine Klasse mit .full-width auf diese Abschnitte anzuwenden, die die Ränder des #content-Div überschreibt, indem die Breite auf 100vw gesetzt wird, sowie einige andere Eigenschaften, die du unten im CSS siehst .Die Verwendung von 100vw verursacht horizontales Zuschneiden, wenn vertikale Bildlaufleisten vorhanden sind
Das Problem ist, dass, wenn genügend Inhalt auf der Seite ist, dass vertikale Bildlaufleisten angezeigt werden, die Breite der Bildlaufleisten in der Berechnung der Breite des Darstellungsbereichs enthalten ist, so dass Inhalt hinter den Bildlaufleisten versteckt wird.
Gibt es eine Lösung für dieses Problem oder eine völlig andere und bessere Art, das zu tun, was ich erreichen möchte?
#content {
width: 75%;
margin: 0 auto;
}
.full-width {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
box-sizing: border-box;
}
.full-width img {
width: 100%;
}<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<div class="full-width">
<img src="http://toprival.com/temp/test-image.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla
dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit
lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus.
Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis.
Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
<!-- content -->
Ich würde es tatsächlich um die andere Art und Weise strukturieren - auf 100% Höhe, und fügen Sie einen "Container" div um Inhalte, die sein sollten 75%. Es ist der Standard Weg, um es zu strukturieren, anstatt Elemente außerhalb ihrer Container zu erweitern, und keine Unordnung mit dem Versuch, Scrollbars usw. zuzulassen. – FluffyKitten
Ich dachte wirklich darüber nach, aber es scheint wie schlechte Praxis, so viel Markup auf die große Mehrheit anzuwenden des Inhalts. –
Um ehrlich zu sein finde ich es nicht schlimmer, als Elemente dazu zu zwingen, etwas zu tun, was sie nicht sollten, indem sie sie außerhalb ihres Containers erweitern und dann in CSS (oder schlimmer JS) Berechnungen durchführen, um den negativen Effekten entgegenzuwirken :) Ich verstehe die Zurückhaltung, mehr Markup hinzuzufügen, aber vermutlich werden die Container zwischen 75% und voller Breite wechseln müssen, so dass ich nicht sehen kann, wie viel mehr Sie als die andere hätten? Auch das Verpacken von Inhalten in Containern ist immer noch etwas strukturell, so dass Sie kein markentypisches Markup einführen. – FluffyKitten