Urbanleg
Ich habe überall gesucht. und konnte immer noch keinen Beispielcode für eine sehr “grundlegende” Idee finden:
Ein div, das 90 % der Bildschirmgröße einnimmt und sich selbst anpasst, wenn sich die Browsergröße ändert (um 90 % des relativen Bildschirms einzunehmen)
Die verschachtelten Divs darin sollten sich ebenfalls selbst skalieren.
Ist es überhaupt möglich?
BEARBEITEN:
Breite 90 % funktioniert nicht, wenn ich versuche, die Größe des Bildschirms vertikal zu ändern.
Eric Warnke
Verwenden Sie vh-Attribute. Es bedeutet Ansichtsfensterhöhe und ist ein Prozentsatz. Höhe: 90vh würde also 90% der Viewport-Höhe bedeuten. Dies funktioniert in den meisten modernen Browsern.
Z.B.
div {
height: 90vh;
}
Du kannst auf den Rest deines albernen 100%-Zeugs am Körper verzichten.
Wenn Sie einen Header haben, können Sie auch einige lustige Dinge tun, wie ihn zu berücksichtigen, indem Sie die calc-Funktion in CSS verwenden.
Z.B.
div {
height: calc(100vh - 50px);
}
Dadurch erhalten Sie 100 % der Höhe des Darstellungsbereichs abzüglich 50 Pixel für Ihren Header.
Das hat bei mir total funktioniert, danke! Wissen Sie, ob diese Methode auf Kompatibilitätsprobleme mit älteren Browsern stößt? Speziell IE?
– straubkreativ
4. April 2016 um 23:17 Uhr
Was ist, wenn ich die Breite dynamisch ändern möchte?
– Ramesh Pareek
4. Juni 2017 um 13:45 Uhr
Sie können vw (Ansichtsfensterbreite) verwenden.
– Eric Warnke
6. Juni 2017 um 19:10 Uhr
Vielen Dank. Ich habe wirklich gekämpft, bis ich deinen Beitrag gefunden habe. Für eine SPA als PWA-Ersatz für die Desktop-App ist das genau das, was ich brauchte.
– Adam Davidson
25. April 2020 um 8:42 Uhr
In diesem Szenario die äußere <div> hat eine Breite und Höhe von 90%. Das Innere div> hat eine Breite von 100 % seines Elternteils. Beide skalieren, wenn die Größe des Fensters geändert wird.
HTML
<div>
<div>Hello there</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
body > div {
width: 90%;
height: 100%;
background: green;
}
body > div > div {
width: 100%;
background: red;
}
Demo
@spencerthayer Was meinst du damit, es funktioniert nicht? Der Browser skaliert den Container so, dass er 90 % Breite und Höhe ausfüllt, wenn die Größe des Fensters vertikal oder horizontal geändert wird. Der Behälter im Inneren nimmt so viel Platz wie möglich ein, der ihm von seinem Elternteil gegeben wird.
– Benutzernamen hier einfügen
2. Mai 2014 um 9:33 Uhr
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 20px;
resize: both;
overflow: auto;
}
img{
height: 100%;
width: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h1>The resize Property</h1>
<div>
<p>Let the user resize both the height and the width of this 1234567891011 div
element.
</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
<img src="https://stackoverflow.com/questions/18666106/images/scenery.jpg" alt="Italian ">
</div>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
</body>
</html>
Muskan
Code-Auszug:
div{height: calc(100vh - 10vmax)}
Sie meinen, CSS zu verwenden und die Breiteneigenschaft auf 90% zu setzen? w3schools.com/cssref/pr_dim_width.asp unter Immobilienwert.
– Huangismus
6. September 2013 um 20:30 Uhr
<div style="width: 90%;"><div style="width: 60%;"></div><div style="width: 40%;"></div></div>– Tomaro
6. September 2013 um 20:31 Uhr
@tomaroo: Das funktioniert nicht, wenn Sie nicht auch bleiben
position: relativeauf der äußeren div.– Benutzer1618143
6. September 2013 um 20:32 Uhr
Okay, Sie haben Ihre Frage bearbeitet … ist
width: 90%; height:90%was suchst du?– Benutzer1618143
6. September 2013 um 20:33 Uhr
@ user1618143 Sicher wird es funktionieren. Was macht
position: relativehaben damit zu tun? Wir verwenden keine absolute oder feste Positionierung oder oben/links/unten/rechts. Position relativ ändert nichts.– Tomaro
7. September 2013 um 16:58 Uhr