DIV Force - hauteur de 100%=/= la hauteur de la page?

Je suis dans une grande de un problème ici, avec une conception que je suis en train de mettre en place. Ici est le site de référence;

http://throwbackhero.com/index1.php

Le problème est que j'ai mis le corps à la hauteur: 100%; dans la feuille de style et sur la #wrapper div. La hauteur va le courant de la hauteur de la page et de ne pas prendre en compte qu'il existe d'autres divs qui pourrait provoquer un débordement.

Je voudrais, une page blanche à la taille du navigateur, même si la dimension verticale de l'navigateur est modifiée, le contenu/emballage div sera réduite à accueillir.

Cela peut-il être fait?

MODIFIER

Bon alors clairement à ma question originale était très confus. Voici une photo;

DIV Force - hauteur de 100%=/= la hauteur de la page?

Donc, en pic 1 (gauche) est le problème. À hauteur de 100%; sur l'emballage et le contenu de la vrd, c'est la création de ce mauvais garçon. Je veux qu'il ressemble à la photo, où le blanc/gris de la zone augmente/réduit en fonction de la taille du navigateur...

Votre question est vraiment vague. Voulez-vous dire #wrapper être la taille de mon navigateur?
double possible de CSS 100% de la hauteur avec padding/margin

OriginalL'auteur Konzine | 2012-03-16

  1. 19

    La façon la plus simple est tout simplement à l'aide de CSS:

    height: 100vh;

    Où " vh " signifie que la hauteur verticale de la fenêtre du navigateur.
    Réactif pour le redimensionnement de brower et les appareils mobiles.

    Sauvé mes fesses! Assez bien pris en charge dans tous les mobiles modernes et non du navigateur! +1

    OriginalL'auteur alchuang

  2. 10

    Donner corps,le HTML & DIV principale height 100%. écrire comme ceci:

    body,html{height:100%;}

.parent{
    min-height:100%;
    width:400px;
    margin:0 auto;
    background:red;
}

    Cochez cette http://jsfiddle.net/3VUGt/

    Ok c'est bien jusqu'à ce que nous obtenir une deuxième div impliqués, jsfiddle.net/3VUGt/5. Essayez que. Voir la façon dont il a créé un problème de débordement au lieu d'être simplement le 100% de la hauteur de la page? Je veux éviter cela.

    OriginalL'auteur sandeep

  3. 0

    Ajouter overflow:auto à la wrapper élément.

    OriginalL'auteur MakuraYami

  4. 0

    Il n'y a pas de CSS solution pour ce problème. Cette CSS "question" a été connu depuis de nombreuses années. Depuis CSS a gagné en fonctionnalités au fil des années, je pensais qu'il peut être un complet CSS solution maintenant. Mais hélas, il ne l'est pas. J'ai essayé beaucoup de choses et ont cherché haut et bas, et le problème reste le même.

    À ma connaissance, il n'existe que 3 solutions qui ne nécessitent pas de 3ème partie les bibliothèques: le positionnement absolu, faux colonnes (deux tons de répéter l'arrière-plan) et JS.

    Les deux seules solutions qui font appel à moi sont: faux colonnes et JS. Je préfère la JS solution, car cela fait plus d'utilisation de CSS. Avec JS vous n'avez pas à re-travailler l'image d'arrière-plan si vous souhaitez modifier la largeur de la colonne ou de la couleur plus tard. Il est plus adaptables et réutilisables solution. Le seul avantage que je vois pour la création de faux colonnes est que votre mise en page ne veut pas se briser si le client désactive le JS.

    JS solution (l'emballage n'est pas nécessaire): https://jsfiddle.net/Kain52/uec9cLe4/

    var side1 = document.getElementsByTagName('main')[0];
var side2 = document.getElementById('mainMenu');
var side1Height = side1.clientHeight;
var side2Height = side2.clientHeight;
if(side2Height < side1Height) { side2.style.height = side1Height + "px"; }
else { side1.style.height = side2Height + "px"; }

    JS solution (wrapper): https://jsfiddle.net/Kain52/7udh55zq/

    var wrapperHeight = document.getElementById('innerWrapper').clientHeight;
document.getElementsByTagName('main')[0].style.height = wrapperHeight + "px";
document.getElementById('mainMenu').style.height = wrapperHeight + "px";

    Explication: Si vous utilisez un div wrapper ensuite, vous pouvez l'affecter à la hauteur de l'emballage. Si vous n'avez pas utiliser un wrapper, alors vous pouvez simplement régler la hauteur du côté le plus court à la hauteur du côté le plus long. Si vous savez que votre côté de la barre de menu sera toujours plus court que votre contenu, alors vous devez seulement deux lignes de code:

    var contentHeight = document.getElementsByTagName('main')[0].clientHeight;
document.getElementById('mainMenu').style.height = contentHeight + "px";

    OriginalL'auteur XSapien

  5. -1

    Si vous êtes d'accord avec le fait d'avoir un peu de JavaScript exécuté à chaque milliseconde sur votre page, et le contenu au-dessus de la zone blanche en question sera toujours la même hauteur en pixels, vous pouvez essayer quelque chose le long des lignes de cette...

    bodyLeadingFill = //put the size taken up by everything above the white div,
                  //including margin, padding, border, etc
function resizeElement(){
    document.getElementById(/* name of white element here */).style.height = (window.innerHeight - bodyLeadingFill) * (/* put the % size you need here */ / 100) + "%";
}
window.setTimeout(resizeElement, 0);

    C'est, bien sûr, en supposant que le contenu au-dessus de la boîte blanche sera toujours la même taille de la police ou du système d'exploitation ou de la taille de la fenêtre.

    Je n'ai pas fait le test moi-même, mais la notion de travail. Regarder dehors pour les commentaires qui disent où mettre quelques infos.

    OriginalL'auteur MineAndCraft12