Conteneur de contenu pour l'adapter à screensize?

Si vraiment mise de base, avec un en-tête, le contenu du conteneur et un pied de page.
Ce que j'ai besoin de faire, est de faire de mon contenu, la taille du récipient, de sorte que toute la mise en page tient sur l'écran. (sauf si le texte dans le conteneur de contenu s'étend ceci, bien sûr).

J'ai essayé de l'affectation d'une hauteur de 100% de la valeur de mon corps, et à partir de là, l'affectation de mon contenu des conteneurs hauteur de 100% aussi, mais que les résultats de la prise de mon contenu, la taille du récipient jusqu'à hauteur de la totalité de l'écran.

Avant que j'ai eu de la hauteur sur le conteneur de contenu défini sur auto, ce qui a évidemment entraîné la page n'étant pas assez long, si un visiteur avec un écran plus grand que la taille de la mise en page, consulté la page.

Voici une partie de mon code:

HTML:

<body>
    <div class="background"></div>
        <div class="page">
            <div class="header">
            </div>

            <div class="content">
            </div>

            <div class="footer">
            </div>
        </div>
</body>

CSS:

html, body {
    height:100%; 
    margin:0; 
    padding:0;
}
.page {
    position:relative; 
    height:100%;
    z-index:1; 
}
.content {
    position:relative;
    width:850px;
    height: 100%;
    margin: 0 auto;
    background: url(images/content.png) 0 0 repeat-y;
}
  • J'étais confus sur la façon de le faire aussi. J'ai fini par avoir à utiliser javascript pour prendre la (screenheight - header - footer) et régler la hauteur de l' content pour que.
  • Vous devriez passer moins de temps dans le codage de la base de CSS et de passer plus de temps à faire ce que votre site va effective de le faire... pour cela, vous pouvez démarrer à l'aide d'un Framework CSS, f.ex. Twitter Bootstrap et vous pouvez facilement obtenir le code source de cette page et à partir de là.
  • Oui. Je pense que la meilleure solution, même si je préférerais un css solution..
InformationsquelleAutor Mathias | 2012-09-09
  1. 3

    Je pense que ce que vous avez besoin (le pied de page sera toujours collé vers le bas)

    CSS

    html, body {
    margin:0;
    padding:0;
    height:100%;
}
.page {
    min-height:100%;
    position:relative;
}
.header {
    background:#00ff0f;
    padding:30px;
}
.content{
    padding:10px;
    padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
    text-align:justify; 
 }
.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:15px;   /* Height of the footer */
    background:#00ff0f;
    padding:10px 0; /*paddingtop+bottom 20*/
}

.content {
    height:100%; //IE HACK
}

    HTML

    <div class="page">
    <div class="header">Header</div>
    <div class="content">
        Some Content Here...
    </div>
    <div class="footer">Footer</div>
</div>​

    Testé dans tous les principaux navigateurs.
    DÉMO.

    InformationsquelleAutor The Alpha
  2. 0

    Ce que vous voulez vraiment est un collant, pied de page, non? Vous pouvez définir le style des autres éléments pour donner l'illusion que le #contenu de l'élément est plus grand qu'il est vraiment.

    http://ryanfait.com/sticky-footer/

    InformationsquelleAutor cimmanon