Mon pied de page ne fonctionne pas en orientation paysage. J'essaye de créer deux divs, chacun d'une hauteur égale, qui ensemble prendront toute la taille disponible entre mon en-tête et pied de page quand l'appareil mobile (de largeur 749px ou moins) est en orientation portrait. Cependant, lorsque l'appareil est en orientation paysage, je souhaite que les divs maintiennent une hauteur minimale de 172 pixels chacun.Le pied de page collant se casse en orientation paysage
De plus, dans chaque div, je veux imbriquer un div plus petit centré verticalement et horizontalement.
Tout va bien en orientation portrait. En mode paysage, le pied de page repose au bas de la fenêtre, plutôt qu'au bas de la seconde div. ".index-content" est la div que j'utilise/tente d'utiliser pour garder le pied de page au bas de la page. L'en-tête a une hauteur fixe de 192px - le pied de page a une hauteur fixe de 32px (2em).
J'ai remarqué que, en orientation paysage, les éléments html et body ne s'étendent que vers le bas de la fenêtre. J'ai fixé la hauteur de chacun à 100%, cependant, je ne comprends pas pourquoi cela se produit. Est-ce un problème avec ma balise meta?
Je suis sûr que la solution est quelque peu évidente mais j'ai été incapable de la disséquer. Toute aide serait appréciée!
@media screen and (min-width: 0px) and (max-width: 749px) {
/* -------Header and footer stuff start-----*/
* {
box-sizing: border-box;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.index-content {
min-height: calc(100% - 2em);
padding: 0;
margin: 0;
height: calc(100% - 2em);
}
.footer {
height: 2em;
background-color: black;
}
header {
height: 192px;
background-color: black;
}
/*------Header and footer stuff end--------*/
/*-------Services stuff---------*/
.wrapper-content {
max-width: 80%;
margin: 0 auto;
padding: 0;
height: calc(100% - 192px);
}
.services-one {
height: 50%;
background-color: blue;
min-height: 172px;
max-width: 256px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.services-one-sub-one {
height: 95%;
width: 95%;
background-color: red;
}
.services-two {
height: 50%;
background-color: green;
min-height: 172px;
max-width: 256px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.services-two-sub-one {
height: 95%;
width: 95%;
background-color: yellow;
}
}<div class="index-content">
<header>
</header>
<div class="wrapper-content">
<div class="services-one">
<div class="services-one-sub-one">
</div>
</div>
<div class="services-two">
<div class="services-two-sub-one"></div>
</div>
</div>
</div>
<footer class="footer">
<p>footer text</p>
</footer>
Cela a fonctionné, merci! J'ai deux questions traitant de pourquoi - 1) J'avais l'impression que si je voulais utiliser un pourcentage de hauteur sur un div enfant (les divs "sub" dans ce cas), je devais indiquer explicitement le pourcentage de hauteur de chaque parent la chaîne - d'où 100% html et la hauteur du corps, et à la fois les déclarations min-height et height sur le contenu de l'index. C'est faux? 2) Pourquoi le min-height sur le contenu de l'encapsuleur et pas les divs "services-one" et "services-two"? Merci si vous avez le temps de répondre. Si c'est une mauvaise étiquette, faites le moi savoir. – cliffgallagher
Si possible, essayez de relever ma réponse. –
Je l'ai fait. J'ai trop peu de points pour qu'il soit enregistré publiquement, mais il a dit qu'il a été sauvegardé ... – cliffgallagher