CSS div du contenu à s'étendre vers le bas de la page

Ok, j'ai essayé BEAUCOUP de solutions proposées dans StackOverflow sur ce problème, mais aucun d'entre eux ont travaillé. Je suppose que c'est une chose la plus délicate et nécessite un délicat solution.

De ce que j'ai vu, chaque problème est différent avec cette "occupation" le corps de la chose, donc je suppose que je suis ici avec un autre.

J'ai vraiment besoin d'aide ici, les gars.

Voici mon problème: http://jsfiddle.net/Ff49Z/5/

Et voici ce que je veux: Quand le "wrapper" div ne remplit pas le corps, je veux la div pour s'étendre vers le bas de toute façon. Donc, en coulisse, ce que je suis en train de réaliser n'est pas une tache grise sur ma mise en page. Comme vous pouvez le voir, emballages sont 100% de la hauteur (c'est une commune de la solution proposée dans la pour ce problème) et qui n'aide pas.

C'est cette div qui n'a pas de développer pour s'adapter à l'emballage:

div#middle {
    padding:10px;
    margin:0 auto;
    height: 100%;
}

BTW, quand overscrolling, le pied de page de bâtons et de wrapper parchemins. C'est le comportement souhaité, et il fonctionne parfaitement.

OriginalL'auteur gomman | 2013-04-15

4

J'ai simplement ajouté:
```
div#middlewrap {
    width:100%;
    position:absolute;
    margin-top:60px;
}
```
et fonctionne comme vous l'avez demandé. EDIT: C'EST FAUX - réponse correcte en dessous de

J'étais sur le point d'abandonner, quand j'ai décidé de réécrire le css à partir de zéro, et il en est sorti plus simple que ce que j'attendais. Je l'ai simplifié votre CSS pour les os et ajouté un peu de cool overflow-y:auto; au milieu wrapper plus doux certains position:fixed; à l'en-tête et le pied de page. Ensuite j'ai ajusté le rembourrage pour les #middle div du contenu et de l'ajout d'un height:100%; pour le corps et le html(de sorte que chaque enfant de corps peut être définie avec succès à height:100%;) et c'est ce qui est sorti:
```
body, html {
    margin:0;
    height:100%;
}
div#headerwrap, div#footerwrap {
    position: fixed;
    left: 0;
    right: 0;
}
div#headerwrap {
    top: 0;
    height:64px;
    background-color: red;
}
div#middlewrap {
    height:100%;
    overflow-y:auto;
    background-color: blue;
}
div#middle {
    padding-top:70px;
    padding-bottom:35px;
}
div#footerwrap {
    bottom: 0;
    height:32px;
    background-color: green;
}
```
C'est tout le CSS dont vous avez besoin. Assez cool euh?

VOICI LE VIOLON

Note: j'ai respecté votre syntaxe, qui est également correct, mais il n'est pas nécessaire d'écrire DIV avant chaque #ID dans votre css. La suppression de ces sélecteurs va considérablement diminuer votre fichier css de poids dans les grands projets.

Des acclamations.

tout d'abord, merci pour la réponse, mais il ne fonctionne pas comme je l'ai demandé, comme une barre de défilement s'affiche lorsqu'il n'est pas nécessaire. Je veux juste la div pour atteindre le bas de la page (exactement le fond, je suppose, pas plus pas moins) lorsque le contenu ne pas remplir le récipient, mais la barre de défilement doit apparaître uniquement lorsque cela est nécessaire (qui a travaillé sur mes sapins de violon). Je vais continuer d'essayer, merci.
vous avez juste à régler/effacer le rembourrage des propriétés d'éviter la overscroll. si il aidé s'il vous plaît envisager d'accepter ma réponse comme correcte. des acclamations.
ici, vous allez, juste tordu le z-index de la propriété et de supprimer toutes les margin/padding sur les emballages. vous pouvez les gérer en interne les divs. des acclamations. jsfiddle.net/Ff49Z/10
cela me brise le collant en-tête de la première de violon. lorsque le contenu overscrolls, le défilement remplace l'en-tête. rembourrage ne permet pas de résoudre ce problème 🙁
ok, on a posté à la même seconde. sur la dernière solution est la overscrolling qui ne fonctionne pas. Lorsque le contenu overscrolls, l'enveloppe ne pas grandir avec elle.

OriginalL'auteur Yenn

Faire tous les éléments parents comme height:100%:

body, html, body>div#middlewrap {
    height: 100%;
}
div#middle {
    min-height:100%;
}

OriginalL'auteur staircasebug

0

Impossible uniquement avec du CSS. Besoin de javascript impliqués. Prendre le client en hauteur (en-tête + pied de page) = min hauteur du contenu

À l'aide de % de la hauteur ne fonctionne pas parce que les parents n'ont pas de hauteur définie.

merci, je vais essayer de faire simple, mais je vais regarder dans l'aide de JS si pas de CSS solution de travail.

OriginalL'auteur Thanh Trung

Vous devez vous connecter pour publier un commentaire.