Comment remplir à 100% du reste à la hauteur?
+--------------------+
| |
| |
| |
| |
| 1 |
| |
| |
| |
| |
+--------------------+
| |
| |
| |
| |
| 2 |
| |
| |
| |
| |
+--------------------+
Contenu de (1) comme illustré ci-dessus sont inconnus, car elle peut augmenter ou diminuer dans les pages générées dynamiquement. La deuxième div (2) comme indiqué ci-dessus, doivent remplir l'espace restant.
voici un exemple de mon code html
<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>
css...
#full{width: 300px; background-color: red;}
#someid{height: 100%;}
Ou est-ce la méthode de mal? Comment dois-je faire?
veuillez voir mon démo et me montrer mon erreur.
- Voulez-vous l'une hauteur de 1, + 2 à la hauteur exacte de la fenêtre d'affichage? Ou 2 est de la même taille que la fenêtre d'affichage et il fait défiler égale à la hauteur de 1?
- une hauteur de 1, je ne sais pas, et le reste de 1, puis 2, pleine hauteur.
- Qu'entendez-vous par
height:100%
? Entendez-vous la div doit occuper le reste de la hauteur? - oui! reste de la hauteur.
- reste la hauteur de la page ou le reste des scrollheight à l'intérieur de la page?
- Il serait ok dans les deux conditions.
- Je ne peux pas vous aider, mais juste de mettre à jour votre question afin que d'autres puissent vous aider. La prochaine fois, veuillez expliquer votre message clairement.. 🙂
Vous devez vous connecter pour publier un commentaire.
Vous devriez être capable de faire cela que si vous ajoutez dans un div (
#header
ci-dessous) pour envelopper votre contenu de 1.Si vous flottez
#header
, le contenu de#someid
sera forcé de s'écouler autour d'elle.Ensuite, vous définissez
#header
's largeur à 100%. Cela permettra de développer pour remplir la largeur de la div contenant,#full
. Cela aura pour effet de pousser tous#someid
's le contenu ci-dessous#header
car il n'y a pas de place autour de l'côtés plus.Enfin, les
#someid
hauteur de 100%, cela fera la même hauteur que#full
.JSFiddle
HTML
CSS
Mise à jour
Je pense qu'il vaut la peine de mentionner que flexbox est bien pris en charge dans les navigateurs modernes d'aujourd'hui. Le CSS peut être modifié ont
#full
devenir un conteneur flex, et#someid
devrait set flex atteindre une valeur supérieure à0
.#someid
est TOUJOURS égale à la hauteur de#full
, malgré la hauteur de#header
. Logiquement, le contenu de#someid
doit commencer par le haut de#full
. Pourquoi ne#header
pousser le contenu vers le bas?#someid
une hauteur de 100%.#someid
la même hauteur que#full
, donc#someid
débordements#full
par la hauteur de#header
. Il ne définit pas#someid
à 100% de la reste de l'espace. Si vous définissezoverflow: scroll;
sur#someid
vous souhaitez voir le problème.calc
etflexbox
dispositions n'étaient pas largement soutenue. Regardez comment que nous avons parcouru en moins de 3 ans!Pour obtenir un
div
à 100% de la hauteur sur une page, vous aurez besoin de mettre chaque objet de la hiérarchie au-dessus de la div à 100% aussi. par exemple:Bien que je ne peut pas comprendre pleinement votre question, je suppose que c'est ce que tu veux dire.
C'est l'exemple que je suis en train de travailler à partir de:
Style
est juste un remplacement pour le CSS que je n'ai pas externalisé.someid
à 100%, alors vous devez ajouter à 100%, et mettre le récipient à 100% aussi. J'ai édité ma question de le montrer.Cela peut être fait avec des tables:
Puis appliquer le style css à faire someid remplir l'espace restant:
Maintenant, je peux entendre la colère des cris de la foule, "Oh non, il est à l'aide de tableaux! - Lui à manger aux lions!" Veuillez écoutez-moi.
Contrairement à la accepté de réponse qui ne sert à rien à part faire de la div conteneur toute la hauteur de la page, cette solution rend div #2 remplir l'espace restant, comme demandé dans la question. Si vous avez besoin de cette deuxième div pour remplir toute la hauteur qui lui sont attribués, c'est actuellement le seul moyen de le faire.
Mais n'hésitez pas à me prouver le contraire, bien sûr! CSS est toujours la meilleure.
CSS:
HTML:
Je sais que c'est une entrée tardive mais même en 2016, je suis surpris par l'absence totale d'IE de soutien pour flex (actuellement 11 est le seul à la soutenir, elle et son majorly buggy à qui http://caniuse.com/#feat=flexbox) qui, à partir d'un point de vue commercial n'est pas génial! Donc, je pense que jusqu'à ce que IE est à l'arrêt, la solution la meilleure et la plupart de la croix-navigateur de l'amicale doit être sûrement un JS/Jquery un?
La plupart des sites utilisent déjà Jquery et un exemple très simple (pour mon code) est:
Vous pouvez bien évidemment remplacer la fenêtre et d'en-tête et de laisser les mathématiques de base, faire le travail. Personnellement, je ne suis toujours pas convaincu sur la flex encore...
J'ai ajouté ce que les pages qui ont été trop court.
html:
css:
Créer un div qui contient les deux divs (à temps plein et someid) et régler la hauteur de la div à la suivante:
hauteur: 100vh;
La hauteur du contenant divs (à temps plein et someid) doit être réglé sur "auto".
C'est tout.
Je sais que c'est une vieille question, mais de nos jours il y a un super formulaire facile à faire, qui est le CSC de la Grille, alors laissez-moi mettre les divs à titre d'exemple:
puis le code CSS:
Et ça y est, la deuxième ligne, scilicet, le someide, prendra le reste de la hauteur
en raison de la propriété 1fr, et la première div aura un min de 100px et un max de
quoi qu'il exige.
Je dois dire que le CSS a avancé beaucoup pour rendre plus facile les programmeurs de vie.