web-dev-qa-db-fra.com

Régler la hauteur à 100% en div absolu

Je suis confronté à un problème avec superposition d'une hauteur de 100%. Je pourrais utiliser position fixe pour résoudre la couverture, mais ce n'est pas vraiment ce que je veux, car vous devriez pouvoir faire défiler l'écran vers le bas> pour que les personnes dont la résolution est inférieure à la mienne puissent voir tout le contenu.

Exemple de code:

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

Le problème: La hauteur de la div 100% ne contient que 100% du navigateur/fenêtre, mais je veux qu'elle couvre tout le corps.

Merci d'avance :)

htmlcssabsolute
39
Nworks

http://jsbin.com/ubalax/1/edit .Vous pouvez voir les résultats ici

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

essayez d'ajouter

position:relative

à vos styles de corps. Chaque fois que vous positionnez absolument quelque chose, vous avez besoin que l'un des conteneurs parents soit positionné de manière relative, afin que l'élément soit positionné de manière absolue par rapport au conteneur parent qui est relatif.

Comme vous n'aviez aucun élément relatif, le css ne saura pas ce à quoi la division est parfaitement positionnée et ne saura donc pas quoi prendre à 100% de la hauteur.

48
Pete

Peu de réponses ont donné une solution avec une hauteur et une largeur de 100% mais je vous recommande de ne pas utiliser le pourcentage en css, utilisez le positionnement haut/bas et gauche/droite.

C'est une meilleure approche qui vous permet de contrôler la marge.

Voici le code:

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

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

Au lieu d'utiliser body, utiliser html a fonctionné pour moi:

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

div {
   position: absolute;

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

Étirement complet (horizontal/vertical)

La réponse acceptée est géniale. Je veux juste souligner certaines choses pour les autres qui viennent ici. Les marges ne sont pas nécessaires dans ces cas. Si vous voulez une mise en page centrée avec une "marge" spécifique, vous pouvez les ajouter à droite et à gauche, comme suit:

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

Ceci est extrêmement utile.

Centrage div (vertical/horizontal)

En prime, un centrage absolu qui peut être utilisé pour obtenir un centrage extrêmement simple:

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

Une autre solution sans utiliser de hauteur mais remplit toujours 100% de la hauteur disponible. Commander ceci par exemple sur le codepen. http://codepen.io/gauravshankar/pen/PqoLLZ

Pour ce html et le corps devrait avoir 100% de hauteur. Cette hauteur est égale à la hauteur de la fenêtre.

Définissez la position intérieure de la div en absolu et donnez le haut et le bas à 0. Cela remplit la div à la hauteur disponible. (hauteur égale au corps.)

code HTML:

<head></head>

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

</html>

code css:

* {
  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