J'essaie de concevoir une page avec les propriétés suivantes qui seront utilisées comme signalisation numérique:
100vh code>) afin que le défilement soit impossible li>
- la page est disposée en rangées à pleine largeur li>
- toutes les lignes mais les dernières sont statiques (ont un contenu prédéfini) li>
- La dernière ligne (qui contiendra un diaporama d'image) devrait remplir l'espace restant dans la fenêtre. Li>
ul>
Voici ce que j'ai jusqu'à présent: p>
p>
<div id="container">
<div class="red"></div>
<div class="blue"></div>
<div class="green">
<img src="http://lorempixel.com/200/300/">
</div>
</div> 4 Réponses :
Vous pouvez définir la position du bloc code> verte code> sur Ceci devrait résoudre le problème: P> P> relative code> et la position de l'image en absolu.
Assurez-vous également que la hauteur du bloc code> vert code> est définie à 100% (pour prendre le reste de la hauteur de la page).
<body>
<div id="container">
<div class="red"></div>
<div class="blue"></div>
<div class="green"><img src="http://lorempixel.com/200/300/"></div>
</div>
</body>
Je change simplement la classe IMG et ajouter à la classe .Green min-hauteur: 100%; De plus, l'image est sensible maintenant avec ce code.
p>
<body>
<div id="container">
<div class="red"></div>
<div class="blue"></div>
<div class="green"><img src="http://lorempixel.com/200/300/"></div>
</div>
</body>Voici donc ce que nous savons:
100vh code> li>
- La première ligne est statique (
hauteur: 100px code>) li>
- La deuxième ligne est statique (
hauteur: 150px code>) li>
- La troisième rangée, qui contient des images, devrait remplir la hauteur restante li>
ul>
Je pense que la solution réside dans les mathématiques de base: p> xxx pré> au lieu de cela dans votre code: p> xxx pré> Essayez ceci: p>
<div id="container">
<div class="red"></div>
<div class="blue"></div>
<div class="green">
<img src="http://lorempixel.com/200/300/">
</div>
</div>
J'étais sous l'impression que vous vouliez que la troisième ligne remplisse la hauteur restante. Voici une alternative avec Hauteur: 100% sur l'image: jsfiddle.net/62qqnx3m/ 9
Essayez ce violon: https://jsfiddle.net/ez4pf8wp/
a ajouté ceci à la Classe IMG: P>
img {
max-height: 100%;
height: 100%;
display: block;
margin: 0;
}