webentwicklung-frage-antwort-db.com.de

Stellen Sie die Höhe auf 100% ein

Ich habe ein Problem mit Überlagerung einer 100% Höhenteilung. Ich könnte eine feste Position verwenden, um das Cover zu lösen, aber das ist nicht wirklich das, was ich will, denn Sie sollten in der Lage sein, auf dem 'Cover' nach unten zu scrollen, damit Leute mit niedrigeren Auflösungen als meiner den gesamten Inhalt sehen können.

Codebeispiel:

HTML

<body>
<div>Overlay example text</div>
</body>

CSS

body {
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: yellow;
}

Das Problem: Die Größe des Divs enthält nur 100% des Webbrowsers/Ansichtsfensters, aber ich möchte, dass es den gesamten Körper abdeckt.

Danke im Voraus :)

39
Nworks

http://jsbin.com/ubalax/1/edit . Hier können Sie die Ergebnisse sehen

body {
    position: relative;
    float: left;
    height: 3000px;
    width: 100%;
}
body div {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    background-color: yellow;
}
44
ashley

versuche hinzuzufügen

position:relative

zu Ihren Körperstilen. Wann immer Sie etwas absolut positionieren, müssen Sie einen der übergeordneten Container relativ positionieren, da dies dazu führt, dass das Element absolut zum übergeordneten Container positioniert wird, der relativ ist.

Da Sie keine relativen Elemente hatten, wird das CSS nicht wissen, wozu das Div absolut in der Lage ist, und wird daher nicht wissen, wovon es 100% der Höhe nehmen soll

48
Pete

Nur wenige Antworten haben eine Lösung mit einer Höhe und einer Breite von 100% ergeben, aber ich empfehle Ihnen, in CSS keinen Prozentsatz zu verwenden, und die Positionierung oben/unten und links/rechts zu verwenden.

Dies ist ein besserer Ansatz, mit dem Sie die Marge steuern können.

Hier ist der Code:

body {
    position: relative;
    height: 3000px;
}
body div {

    top:0px;
    bottom: 0px;
    right: 0px;
    left:0px;
    background-color: yellow;
    position: absolute;
}
11
Jerome Cance

Anstatt body zu verwenden, hat html für mich funktioniert:

html {
   min-height:100%;
   position: relative;
}

div {
   position: absolute;

   top: 0px;
   bottom: 0px;
   right: 0px;
   left: 0px;
}
5
Misja

Vollständiges Strecken (horizontal/vertikal)

Die akzeptierte Antwort ist großartig. Ich möchte nur auf einige Dinge für andere hinweisen, die hierher kommen. Ränder sind in diesen Fällen nicht erforderlich. Wenn Sie ein zentriertes Layout mit einem bestimmten "Rand" möchten, können Sie diese wie folgt rechts und links hinzufügen:

.stretched {
  position: absolute;
  right: 50px;  top: 0;  bottom: 0; left: 50px;
  margin: auto;
}

Das ist äußerst nützlich.

Zentrierteil (vertikal/horizontal)

Als Bonus absolute Zentrierung, mit der sich eine extrem einfache Zentrierung erzielen lässt:

.centered {
  height: 100px;  width: 100px;  
  right: 0;  top: 0;  bottom: 0; left: 0;
  margin: auto;
  position: absolute;
}
3
Kevin Redman

Eine andere Lösung, bei der keine Höhe verwendet wird, die jedoch die verfügbare Höhe zu 100% ausfüllt. Überprüfen Sie dies beispielsweise auf dem Codepen. http://codepen.io/gauravshankar/pen/PqoLLZ

Hierfür sollten HTML und Body 100% Körpergröße haben. Diese Höhe entspricht der Höhe des Ansichtsfensters.

Machen Sie die innere Div-Position absolut und geben Sie oben und unten 0 ein. Dies füllt die Div auf die verfügbare Höhe. (Höhe gleich Körper.)

hTML Quelltext:

<head></head>

<body>
  <div></div>
</body>

</html>

cSS-Code:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  position: relative;
}

html {
  background-color: red;
}

body {
  background-color: green;
}

body> div {
  position: absolute;
  background-color: teal;
  width: 300px;
  top: 0;
  bottom: 0;
}
1
Gaurav