web-dev-qa-db-fra.com

La hauteur ne correspond pas à 100% à celle du fluide contenant, même si le html et le corps sont

J'ai la mise en page suivante (j'utilise Meteor): 

<template name="headerFooter">
    <div class="container-fluid fill-height">
        {{> header}}

        {{> UI.contentBlock}}

        {{> footer}}
    </div>
</template>

<template name="home">
    {{#headerFooter}}
        <div class="row body-film">
            <div id="newsfeed" class="col-sm-offset-7 col-sm-5 block-film">
                {{#each stories}}
                    <div class="story">...</div>
                {{/each}}
            </div>
        </div>
    {{/headerFooter}}
</template>

et ceci (pertinent) css la sauvegarde:

html {
    height: 100%;
}
body {
    min-height: 100%
} 
.fill-height {
    height: 100%;
}

Les éléments html et body se comportent tous les deux comme prévu. Ils remplissent leurs zones à n’importe quel niveau ou taille de zoom.

Cependant, le container-fluid avec la classe fill-height ajoutée ne fait pas le travail. Il ne fait qu'emballer son contenu et ne pas remplir jusqu'au fond. C'est un problème car il est responsable de l'ajout de body-film et block-film à la page, qui ne sont que des arrière-plans semi-transparents pour donner à la chose une unité de couleur.

Voici quelques captures d'écran, toutes avec la page zoomée pour que le contenu ne remplisse pas la hauteur:

My page with nothing selected

Maintenant, le voici avec l’élément body sélectionné. Comme vous pouvez le constater, le parent remplit parfaitement sa tâche.

My page with body selected

Mais le container-fluid ne le fait pas.

My page with container selected

Avec fill-height, j'ai essayé à la fois height et min-height, et ils ont exactement la même apparence.

Votre aide est appréciée!

Mettre à jour

J'ai essayé toutes les combinaisons possibles de min-height et height sur ces trois éléments et rien ne fonctionne correctement.

height sur les trois œuvres lorsque le contenu est trop petit pour la fenêtre d'affichage, mais lorsque le contenu est trop volumineux pour la fenêtre d'affichage, le bloc de contenu déborde entièrement de la body, ce qui signifie que les films sont trop courts pour lui.

min-height sur les trois me semble être la solution la plus logique, mais il se brise lorsque le contenu est trop petit. Dans ce cas, l'élément body ne s'étend pas pour remplir son parent html.

Que se passe-t-il!!!!????? S'agit-il d'un bogue dans le nouveau moteur de gabarit Blaze utilisé par Meteor ?

Mettre à jour

Je viens d'essayer height: inherit dans mon fill-height, et cela n'a pas fonctionné non plus. Je suis vraiment au bout du rouleau. Cela semble être si simple.

Mettre à jour

Bon, j'ai un léger changement à faire. Avec cette less:

.fill-height {
    min-height: 100%;
    height:auto !important; 
    height: 100%; 
}
.body-film {
    .fill-height();
}
.block-film {
    .fill-height();
}

Le conteneur-fluid a maintenant toute sa hauteur, mais pas les body-film et block-film qui utilisent exactement le même mixin !!

Voici une capture d'écran montrant le row.body-film, qui devrait être de la hauteur, puisque le container-fluid ci-dessus est (prenez mon mot, le container-fluid est maintenant étiré pour remplir le corps).

The row is broken.

Notez que l'ajout manuel du fill-height à la déclaration html de la ligne n'a rien changé, il se comporte de la même manière que s'il recevait simplement cela via le mixin body-film.

Pourquoi certains éléments ne répondent-ils pas du tout à toutes ces demandes min-height?

P.S., j'utilise Chrome, mais c'est est sur une machine Ubuntu. Je ne peux donc pas être sûr qu'il y ait des incohérences.

Réponse

Les éléments suivants ont fini par fonctionner:

html, body {
    height: 100%;
}
.container-fluid {
    height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
    height: 100%;
    overflow-y: auto; // a value of 'scroll' will force scrollbars, even if they aren't necessary. This is cleaner.
    background-color: fadeout(@studio-bar-color, @studio-body-film-trans-delta);
}
.block-film {
    min-height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
    background-color: fadeout(@studio-bar-color, @studio-block-film-trans-delta);   
}

L'attribut overflow était extrêmement important, et c'était quelque chose que l'on ne connaissait pas beaucoup auparavant. Donner une valeur scroll à tout le corps (ce qui devait pouvoir être déplacé de haut en bas) constituait la réponse, tout en donnant à l'élément le plus interne (block-film) le min-height pour s'assurer qu'il s'étirait tout seul et ensuite tous .

htmlcsstwitter-bootstrapmeteorless
20
blaineh

Je sais que vous avez dit avoir essayé toutes les combinaisons, mais qu'en est-il:

html, body {
    height: 100%;
}
.fill-height {
    min-height: 100%;
    height:auto !important; /* cross-browser */
    height: 100%; /* cross-browser */
}

Le problème avec la définition de min-height: 100% sur le corps est que height: 100% sur la div enfant n'a pas réellement de hauteur parent appropriée à référencer et ne fonctionnera pas.

MODIFIER:

Cette logique s’applique à tous les enfants divs. Donc, dans votre cas, le corps-film div est un enfant de fluide fluide. Parce que container-fluid a maintenant un min-height de 100%, et non une height définie (elle est définie sur auto), lorsque vous attribuez un pourcentage de hauteur à body-film, il n'a pas de hauteur à référencer. Il vaut la peine de lire MDN - CSS height et MDN - CSS min-height .

En d'autres termes, si vous souhaitez avoir une div avec une hauteur ou une hauteur minimale de 100%, tous les éléments parents doivent avoir une hauteur définie de 100%, jusqu'au maximum de la balise html.

Ce que vous devrez peut-être faire est quelque chose comme ceci:

html, body {
    height: 100%;
}
.container-fluid {
    height: 100%;
    overflow-y: hidden; /* don't show content that exceeds my height */
}
.body-film {
    min-height: 100%;
    overflow-y: scroll;
}

Ce n'est peut-être pas la réponse définitive, car cela dépend de ce que vous voulez exactement, mais j'espère que cela vous placera sur la bonne voie.

24
happyjack