Relative div hauteur
Je veux diviser la vue en quatre parties.
Un en-tête en haut, en utilisant toute la largeur de la page et hauteur fixe.
Le reste de la page est divisée en deux blocs de la même hauteur, la partie supérieure de ceux-ci contient deux de même taille des blocs les uns à côté des autres.
Ce que j'ai essayé (sans la tête):
<div id="wrap">
<div id="block12">
<div id="block1"></div>
<div id="block2"></div>
<div class="clear"></div>
</div>
<div id="block3"></div>
</div>
Et le CSS:
#wrap {
width: 100%;
height: 100%;
}
#block12 {
width: 100%;
max-height: 49%;
}
#block1, #block2 {
width: 50%;
height: 100%;
float: left;
overflow-y: scroll;
}
#block3 {
width: 100%;
height: 49%;
overflow: auto;
/*background: blue;*/
}
.clear { clear: both; }
Apparemment, à l'aide d'un pourcentage de la valeur pour la hauteur ne fonctionne pas de cette façon. Pourquoi donc?
Veuillez fournir un Violon..
OriginalL'auteur Explicat | 2013-09-30
Vous devez vous connecter pour publier un commentaire.
ajouter cela pour vous CSS:
travail Violon
quand vous dites à
wrap
être100%
, 100% de quoi? de son parent (le corps), de sorte que sa mère a avoir une certaine hauteur.et il en va de même pour
body
, ses parents sonhtml
.html
son parent de la fenêtre d'affichage..donc, en les réglant à la fois à 100%,
wrap
peut aussi avoir un pourcentage de la hauteur.aussi:
les éléments ont des valeurs par défaut padding/margin, qui provoque leur durée d'un peu plus de la hauteur que vous avez appliqué. (provoquant une barre de défilement)
vous pouvez utiliser
à désactiver.
Regarder Que Le Violon
Cela a fonctionné pour moi. Merci.
OriginalL'auteur avrahamcool
Lorsque vous définissez un pourcentage de la hauteur sur un élément qui est des éléments parents n'ont pas les hauteurs ensemble, les éléments parents ont un défaut
Vous demandez au navigateur pour calculer une hauteur à partir d'une valeur indéfinie. Depuis que serait égale à une valeur nulle valeur, le résultat est que le navigateur ne fait rien avec la taille de l'enfant-éléments.
En outre à l'aide d'une solution d'activer JavaScript, vous pouvez utiliser cette mortelle facile de la table de la méthode:
Aperçu sur http://jsbin.com/IkEqAfi/1
Mais: Bare à l'esprit, que le tableau de la méthode ne fonctionne correctement dans tous les Navigateurs et Internet Explorer 8 et supérieur. En remplacement, vous pourriez utiliser JavaScript.
OriginalL'auteur Sven
ajouter ceci dans votre css:
et modifier le max-hauteur de
#block12
àheight
Explication:
Fondamentalement
#wrap
a été de 100% de la hauteur (mesure relative), mais lorsque vous utilisez des mesures relatives regarde à son parent de l'élément de mesure, et il n'est normalement pas défini car il est également relative. Le seul élément(s) d'être en mesure d'utiliser une relative hauteurs sontbody
et ouhtml
eux-mêmes selon le type de navigateur, le reste des éléments de la nécessité d'un élément parent avec une hauteur absolue.Mais attention, c'est difficile de jouer avec une relative hauteurs, vous devez calculer correctement votre en-tête de la hauteur de sorte que vous pouvez soustraire de l'autre élément de pourcentages.
OriginalL'auteur aleation
Pourcentage de la largeur des œuvres, mais de pourcentage en hauteur ne fonctionnera pas, sauf si vous spécifiez une hauteur spécifique pour un parent, dans la dépendante de la boucle...
Voir ceci :
pourcentage de la hauteur ne fonctionne pas?
OriginalL'auteur Sachin
La div de prendre la hauteur de son parent, mais depuis il n'a pas de contenu (expecpt pour votre divs), il ne sera que de la hauteur de son contenu.
Vous avez besoin de régler la hauteur du corps et de l'html:
HTML:
CSS:
Et un JSFiddle
OriginalL'auteur LinkinTED
Fondamentalement, le problème réside dans block12. pour le bloc1/2 pour prendre de la hauteur totale de la block12, elle doit avoir une hauteur définie. Ce débordement de pile post explique que dans vraiment bon détail.
Donc si ce réglage de hauteur définie pour block12 vous permettra de régler la bonne hauteur. J'ai créé un exemple sur JSfiddle qui va vous montrer les blocs peuvent être flottait à côté l'un de l'autre, si le block12 div est réglé à une hauteur standard par le biais de la page.
Voici un exemple dont un en-tête et block3 div avec un peu de contenu dans les exemples.
OriginalL'auteur ajfstuart