Jeu de div pour remplir le reste de la hauteur de façon dynamique?

Donc. Mon code est quelque chose le long des lignes de

<html>
<body>
    <div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
        <img src="header_image.svg" />
    </div>
    <div id="content" style"display:block">
        Some content
    </div>
</body>
</html>

J'ai un svg dans l'en-tête que j'ai réglé de sorte qu'il corresponde à la largeur de la fenêtre et la hauteur des échelles de préserver le svg. Puis-je avoir le reste de la page dans une autre div. Je voudrais en sorte que la page n'a pas de défilement, et que ce contenu div remplit à monter le reste de la fenêtre. Le problème est que, depuis la hauteur de l'en-tête change avec la largeur de la fenêtre, je ne peux pas définir le contenu de la div en pixels ou en pourcentage, ou quelque chose de concret.

Comment puis-je régler la hauteur de la div du contenu de modifier dynamiquement avec la hauteur de l'en-tête?

Je ne connais pas le Javascript ou JQuery (je sais, je sais - je), mais, idéalement, la hauteur de la div du contenu serait défini pour être quelque chose comme la hauteur:(hauteur de la fenêtre d'affichage)-(hauteur de la tête), mais je n'ai pas la moindre idée de comment faire cela.

InformationsquelleAutor tuckerchapin | 2013-09-14
  1. 21

    vous n'avez pas à utiliser un script pour ça.
    et aussi: je vous recommande de séparer votre style de votre balise.

    HTML

    <div id="wrapper">
    <div id="header">
        <img src="header_image.svg" alt="the img is empty"/>
    </div>
    <div id="content">Some content</div>
</div>

    ajouter à votre CSS

    html, body {
    height: 100%;
    margin: 0px;
}

/* this is the big trick*/
#wrapper:before {
    content:'';
    float: left;
    height: 100%;
}
#wrapper {
    height: 100%;
    background-color: black;
    color: white;
}
#header {
    background-color:#000;
}
#content {
    background-color: gray;
}
/* this is the big trick*/
#content:after {
    content:'';
    display: block;
    clear: both;
}

    Travail Violon

    Testé sur: IE10, IE9, IE8, FF, Chrome.

    1. ne pas utiliser le positionnement absolu
    2. ne pas utiliser de Script (Pur CSS solution)
    3. design fluide
    4. de la croix-navigateur

    Explication:
    par pseudo-élément, je suis de la création d'un élément flottant (sans contenu ou de la largeur, de sorte qu'il est invisible)
    qui a 100% de la hauteur du conteneur.

    et avec un autre pseudo-élément je crée une div juste après la content div. (sans contenu, de sorte qu'il est aussi invisible) qui a pour attribut. donc, il doit être en dessous de la flottait celui que j'ai créé précédemment. faire de la content d'aller tout le chemin vers le bas.

    • La magie noire, jamais vu ça avant 🙂 s'il vous Plaît expliquer le "gros truc", je suis curieux de savoir comment cela fonctionne!
    • Hmmm... je pense avoir fait tous les changements que vous avez, mais il ne semble pas fonctionner. J'aimerais vraiment avoir ce travail, c'est une solution élégante. Moi aussi, j'ai aucune idée de comment ça fonctionne comme @opatut. Le site est tuckerchapin.com
    • Ok: donc, j'ai mis à jour mon violon pour montrer que ça fonctionne vraiment.
    • BTW: le script que j'ai ajouter, ne fait pas partie de la solution. ses juste pour vous montrer que cela fonctionne avec des données dynamiques.
    • Cela fonctionne lorsque je créé un vide html et la css de fichiers à partir de zéro pour le tester. Je vous remercie donc de la solution, mais j'ai pas encore le faire fonctionner avec mon contenu existant. Quelque chose qui est probablement le dépasse.
    • Afin de publier la totalité du HTML/CSS. et nous allons essayer de trouver le problème. [mieux dans un violon]
    • Je viens de réaliser que j'ai mis votre "contenu" plutôt que "mon " conteneur", mais même quand j'ai corrigé cela, il ne fonctionne pas.
    • Il vous manque le code html (à partir de ma première règle CSS). et le contenu de la chose (supprimer votre style pour votre ancien conteneur) découvrez cette Travailler le Violon [ne pas oublier d'enlever le fond gris]
    • aussi, dans les votre violon, j'ai vu que vous vous êtes trompé de fermer votre links tags.
    • Ne voulez-vous de tous ceux img est à 100% heigt? vous avez puted dans a de balises et de ne pas leur donner 1005 hauteur.
    • donc.. de plus la magie noire. mais regardez ceci j'ai changé votre balisage pour atteindre cet objectif.
    • Oh mon dieu. Je vous remercie. Je vous remercie beaucoup pour cela. Est-il possible que je pourrais vous donner le crédit approprié pour votre aide?
    • Emm, rappelez-vous juste pour aider quelqu'un d'autre si vous le pouvez.. Et de la.. Marque de cette réponse est acceptée.
    • Il semble comme avoir overflow: hidden sur le content vis de cette. Aucune idée pourquoi?
    • le overflow:hidden; les causes de la div pour vraiment calculer son espace. si vous souhaitez appliquer overflow:hidden;pour le contenu, il suffit d'ajouter une autre couche (c'est un peu compliqué) voici un violon
    • Pouvez-vous me dire si je peux utiliser la même solution si le flexible div obtenir le reste de la page est placé non pas le dernier, mais d'abord ou quelque part dans le milieu? J'ai essayé de faire la même chose avec la souplesse d'un être avant le fixe mais je ne pouvais pas.
    • oui. il peut être fait, mais il est un peu plus difficile. mais depuis ce post, 'flexbox' a une meilleure prise en charge du navigateur et il rend la vie beaucoup plus facile. vous devez utiliser flexbox. voir ce lien.
    • m'a sauvé la vie. Je suis ne dirais pas que c'est "une solution élégante", mais il fonctionne très bien en conditions réelles (manque de soutien de la flex-zone). Malheureusement, il est incompatible avec bootstrap et peut-être d'autres frameworks css.
    • cela aidera à effacer du haut compensé mais est-il possible d'avoir le contenu de la hauteur de la fenêtre reste de la hauteur, 'coz ici-tête aussi défile quand je scroll vers le bas
    • maintenant que nous avons flex, nous n'avons pas besoin de ces tours.
    • ouais je sais, mais j'ai une table qui devrait utiliser le reste de la hauteur de la fenêtre. Je pense que pour le tableau, nous ne pouvons pas utiliser flexbox
    • pourquoi pas?
    • il va changer la disposition de table

    InformationsquelleAutor avrahamcool