Ein div mit automatischer Größenanpassung beim Ändern der Fensterbreite / -höhe

Ich habe überall gesucht .
und konnte immer noch nicht kommen mit Beispiel-code, der eine sehr "basic" - Idee:

Einem div, die 90% der Display-Größe und es passt sich, wenn die browser-Größe ändert (zu 90% von der relativen Bildschirm)

Den verschachtelten divs sollte es neu Größe selbst, als auch..

ist es überhaupt möglich?

EDIT:

Breite 90% nicht funktioniert, wenn ich versuche zu re-Größe der Bildschirm vertikal.

InformationsquelleAutor der Frage Urbanleg | 2013-09-06

autoresize html

36

Nutzung vh Attribute. Es bedeutet viewport-Höhe und ein Prozentsatz. So Höhe: 90vh würde bedeuten, 90% der viewport-Höhe. Dies funktioniert in den meisten modernen Browsern.

ZB.
```
div {
  height: 90vh;
}
```
Können Sie verzichten auf den rest Ihres dummen 100% Zeug auf den Körper.

Wenn Sie einen header Sie können auch einige lustige Dinge wie nehmen Sie es in Betracht, durch die Verwendung der calc-Funktion in CSS.

ZB.
```
div {
  height: calc(100vh - 50px);
}
```
Dadurch erhalten Sie 100% der viewport-Höhe, abzüglich 50 Pixel für den header ein.

InformationsquelleAutor der Antwort Eric Warnke

In diesem Szenario werden die äußeren <div> hat eine Höhe und eine Breite von 90%. Die innere div> hat eine Breite von 100% des übergeordneten Elements ein. Beide Waage bei der Größenänderung der Fenster.

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;
}