margins die sich zahlenmäßig flexibel nach Fensterbreite ändern

mediamat

Erfahrenes Mitglied
Ich habe wo was gesehen, da wurde ein Div irgendwo tief in einem verschachtelten Code mit
Code:
margin-left: -300px; margin-right: - 300px
auf bildschirmfüllend gezogen.

Erst dachte ich es ist ganz normal mit den Pixelangaben gemacht, aber die Pixelwerte ändern sich live wenn man das Fenster zieht.
Irgendwo hab ich was gelesen, das geht mit JavaScript?

Aber geht es auch ohne?
Bzw. falls nicht, wie geht das mit JS genau (evtl. Links zu Anleitungen)?

Mit "%" gehts übrigens nicht, da wird der Rand beim Zusammenschieben teilweise abgeschnitten...obwohl man ja meinen müsste bei Prozent bleibt es immer gleich.
 
Flexible margin-Werte lassen sich zum Beispiel mittels calc() definieren:
CSS:
div {
   margin-left:calc(10vw + 5%);
   margin-right:calc(10vw + 5%);
}
Oder um beim obigen Beispiel mit negativem Vorzeichen zu bleiben:
CSS:
div {
   margin-left:calc(10vw - 50%);
   margin-right:calc(10vw - 50%);
}
Aber schon allein die Angabe der relativen Einheit "%" sorgt für flexible Außenabstände, die sich dem Viewport anpassen:
CSS:
div {
   margin-left:10%;
   margin-right:10%;
}
Negatives Vorzeichen:
CSS:
div {
   margin-left:-10%;
   margin-right:-10%;
}
Besagtes <div> ist in diesen Beispielen das unmittelbare Kindelement von <body>:
HTML:
<body>
  <div>...</div>
</body>
 
Das funktioniert nur bis zu einer bestimmten Fensterbreite, dann rutscht es zum Teil doch aus dem sichtbaren Bereich. Außerdem geht es sprungweise nicht fließend.
Ich will damit ein Template ändern, hier der Link http://demos.famethemes.com/screenr/
Und zwar bei "Services" die divs "class="row".

Dass ich die rows innen breit ziehen will, ist auch weil ich es so mal woanders bei einem PageBuilder gesehen hab.

Geht das? Oder muss da noch woanders was hin? Es ist dort halt nicht gleich in Body

EDIT: Ich sitze auch an nem ziemlich großen Monitor, vielleicht liegt das am erst riesigen, dann normalen Viewport?
 
Vielen Dank fürs Ausprobieren!
Es gibt in WordPress den "SiteOrigin Pagebuilder" der macht das auch so und bringt da tolle randlose Layouts hin egal wie außenrum der Rest aussieht...deshalb kam ich auch überhaupt auf die Idee (nur hab ich bei dem das nicht rausgefunden wo der Code ist, der das macht).
Ich muss dann halt mal probieren das bisschen anders zu machen. Außen ein Container ist ja bereits volle Breite da probier ich das mal ab da...
 
Zurück