mise en page, en-tête et un pied fixé hauteur et fluide contenu mais le défilement de ligne 3

À en juger par les questions précédentes et leur manque de réponses, je ne suis pas sûr qu'il y aura une bonne réponse pour cela. Heureusement, nous avons besoin uniquement pour prendre en charge les navigateurs plus récents.

À la recherche d'une mise en page pour nous faire avoir un 3 lignes avec une taille fixe en-tête et pied de page, mais la ligne de centre est fluide avec la hauteur du navigateur mais défile également lorsque son contenu est trop grand.

Possible sans JavaScript ? Nous avons essayé (exemple simplifié) :

<html style="height: 100%">
<body style="height: 100%">
<section style="height: 100%; display: table;">
  <header style="display: table-row; height: 200px;">
    Header
  </header>
  <section style="display: table-row; height: 100%; overflow-y: auto;">
    Content
  </section>
  <footer style="display: table-row; height: 200px;">
  </footer>
</section>
</body>
</html>

Problème est que lorsque la section contenu contient suffisamment de contenu pour dépassement de la hauteur de celui-ci, au lieu de défilement du contenu étire à la place. J'avais espéré que flottant le contenu pourrait aider, mais pas bon il ya soit.

Toutes les idées ?

répondre #1

Même si vous avez uniquement pour prendre en charge les navigateurs plus récents, je pense qu'il ya une solution qui peut faire tous les navigateurs (ou du moins la plupart). L'aborder comme une solution de « pousser du pied de page ». Par exemple :

CSS :

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

HTML :

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="article"></div>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Alors, maintenant, l'en-tête et le pied sont une taille définie, au milieu (appelé l'article) remplira l'écran à moins qu'il n'y a plus de contenu, auquel cas il s'étire. Si vous modifiez, veillez à noter la position de la balise div wrapper, qui encapsule l'en-tête et le corps, mais pas le pied de page.

Tags lesen

html css css3

über Fragen

CODE FAQ