Mise en page CSS pour en-tête, pied de page et le contenu avec la barre de défilement

I ont besoin de la mise en page suivante pour une webapp:Mise en page CSS pour en-tête, pied de page et le contenu avec la barre de défilement

+---------------------------------------------+ 
|     header     | 
+-------------------------------------------+-+ 
|           |#| 
|     content     | | 
|           |#| 
+-------------------------------------------+-+ 
|     footer     | 
+---------------------------------------------+

tête/pied de page devrait toujours être en haut/bas de la page du navigateur. Ils n'ont pas une hauteur fixe.

Le contenu doit remplir l'espace disponible et, éventuellement, avoir une barre de défilement (indiquée par #). La barre de défilement ne doit pas couvrir toute la fenêtre.

J'ai besoin que cela fonctionne dans IE> = 7, Chrome et Firefox.

Jusqu'ici j'ai essayé différents divs et tables mais ils ont tous échoué parce que je ne peux pas obtenir le contenu pour remplir exactement l'espace disponible.

Mise à jour: La hauteur de tête et pied de page doit être déterminée par leur propre contenu (par exemple en-tête pourrait inclure un menu, pied de page une notification établie par javascript).

Echantillon ajouté:

Cela devrait montrer ce que je suis en train de faire. Le problème est (en dehors de ne pas travailler :)) est que la hauteur de la div 'externe' est plus grande que la fenêtre.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%"> 
<head> 
    <script src="../lib/jquery-1.4.2.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
    .header { width: 100%; background-color: red; } 
    .footer { width: 100%; background-color: blue; }  
    .content { overflow: auto; height: 100%; } 
    </style> 
    <script type="text/javascript"> 

     $(function() 
     { 
     $("#grow").click(function() { var a=$("<div>test</div>").hide(); $(".header").append(a); a.slideDown(); }); 
     $("#toggle").click(function() { $("#text").toggle(); }); 
     }); 

    </script> 
</head> 
<body style="height: 100%"> 
    <div id="outer" style="height: 100%"> 
    <div class="header"> 
     header <a id="grow" href="#">grow</a> 
    </div> 
    <div class="content"> 
     <h3> 
     Lorem:</h3> 
     <p> 
     <a id="toggle" href="#">toggle</a> 
     </p> 
     <p id="text"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing 
     neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
     Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam 
     posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo 
     nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras 
     interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat 
     mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing 
     neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
     Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam 
     posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo 
     nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras 
     interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat 
     mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus. 
     Vestibulum consequat vestibulum neque. Donec sagittis nisl sed sem dapibus accumsan. Praesent at ipsum enim. Nullam tellus 
     sem, lobortis aliquet aliquet nec, volutpat vitae felis. Fusce dui leo, elementum sit amet varius sed, dictum non enim. 
     </p> 
    </div> 
    <div class="footer"> 
     footer 
    </div> 
    </div> 
</body> 
</html>

Source

2010-10-06 laktak

Donc, si le pied de page et en-tête ne sont pas des hauteurs fixes, quelle hauteur sont-ils? Et quoi d'autre remplit l'espace "contenu"? – Nellius

Mise à jour de la question. Le contenu est rempli par le contenu, par ex. texte, listes, flash, etc – laktak

Vous devez faire un choix, vous ne pouvez pas avoir un pied de page collant avec une hauteur non déterminée ... – Guillaume86

En fin de compte que je devais utiliser Javascript en combinaison avec l'événement resize:

<html> 
<head> 
    <script type="text/javascript" src="~/Scripts/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 
    $(function() 
    { 
     var resize=function() { $(".dynamic-y").each(function (i, x) { $(x).height($(window).height()-$(".footer").outerHeight()-$(x).offset().top); }); }; 
     $(window).resize(resize); 
     resize(); 
    }); 
    </script> 
</head> 
<body> 
    <div class="header"> 
    ... 
    </div> 
    <div class="page dynamic-y"> 
    ... 
    </div> 
    <div class="footer"> 
    ... 
    </div> 
</body> 
</html>

Source

2010-11-15 14:58:01 laktak

http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/

Changez simplement

#content { 
    background: #fff; 
    position: absolute; 
    top: 100px; 
    left: 150px; 
    width: 700px; 
    height: 500px; 
}

hauteur: auto;

max-height: tout ce que vous voulez

débordement-x: hidden;

overflow-y: auto;

Source

2010-10-06 11:01:24 KhanZeeshan

Bien que vous souhaitiez définir une hauteur spécifique, de sorte qu'il semble identique dans tous les navigateurs, IE7 ne prend pas en charge la hauteur maximale pour autant que je sache. – jimplode

Cela ne fonctionne pas du tout pour moi. Le pied de page doit être placé en bas de la fenêtre du navigateur. – laktak

Afin de placer le pied de page dans le bas, vous devez donner min-height: 500px; car en DIV si vous ne donnez pas de HAUTEUR, de GAUCHE, de FLOAT & etc, ils vont se chevaucher. – KhanZeeshan

Je suis confus quant à ce que vous cherchez. Vous dites que vous voulez une barre de défilement pour la section de contenu, mais saviez-vous que les navigateurs fournissent automatiquement des barres de défilement en cas de besoin?

La page HTML ci-dessous rend la mise en page que vous décrivez (je pense), mais si vous voulez forcer une barre de défilement à la section .content pour une raison quelconque, il suffit d'ajouter cette ligne supplémentaire à la CSS:

.content { height : 300px; overflow-y:auto; }

See my code run on jsFiddle.net

BTW, j'ai enlevé ce que je ressentais était le code inutile de votre html, comme le width:100; etc.

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%"> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css"> 
    <style type="text/css"> 
    html, body{ height:100%; } 
    #outer{ /* footer stick to bottom */ min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -1.5em; /* end footer stick to bottom */ } 
    .header { background-color: red; } 
    .footer, .push { height: 1.5em; } 
    .footer { position:relative; background-color: blue; text-align:center;} 
    </style> 
    <script type="text/javascript"> 
    $(function() 
    { 
    $("#grow").click(function() { var a=$("<div>test</div>").hide(); $(".header").append(a); a.slideDown(); }); 
    $("#toggle").click(function() { $("#text").toggle(); }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="outer"> 
    <div class="header"> 
     header <a id="grow" href="#">grow</a> 
    </div> 
    <div class="content"> 
     <h3>Lorem:</h3> 
     <p><a id="toggle" href="#">toggle</a></p> 
     <p id="text"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing 
     neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
     Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam 
     posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo 
     nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras 
     interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat 
     mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing 
     neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
     Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam 
     posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo 
     nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum vulputate risus, eu fringilla urna malesuada eu. Cras 
     interdum sollicitudin volutpat. Sed eu iaculis dui. Praesent eleifend sem a urna viverra ullamcorper. Vivamus iaculis volutpat 
     mauris, sed ornare diam laoreet vitae. Aenean cursus dui vitae mauris tempus pulvinar. Morbi pharetra rutrum eros sed luctus. 
     Vestibulum consequat vestibulum neque. Donec sagittis nisl sed sem dapibus accumsan. Praesent at ipsum enim. Nullam tellus 
     sem, lobortis aliquet aliquet nec, volutpat vitae felis. Fusce dui leo, elementum sit amet varius sed, dictum non enim. 
     </p> 
    </div> 
    <div class="push"></div> 
    </div> 
    <div class="footer">footer</div> 
</body> 
</html

Source

2010-10-06 15:11:49 JohnB

Je ne veux pas mettre le contenu à une hauteur fixe - il devrait augmenter avec la taille de Windows. – laktak

Donc, cette réponse ne vous aide pas du tout? – JohnB

désolé, ne pas utiliser votre code, mais voici un aperçu de base de ce que je pense que vous voulez faire.

<!DOCTYPE html> 
<head> 
    <style type="text/css"> 
    html { 
     min-height: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
    } 
    body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
    } 
    .wrap { 
     width: 900px; 
     margin: 0 auto 0; 
     padding: 0; 
    } 
    .head { 
     width: 900px; 
     background: black; 
     color: white; 
     min-height: 20px;/* just for example */ 
     display: block; 
     position: fixed; 
     z-index: 1000; 
     top: 0; 
    } 
    .content { 
     width: 900px; 
     background: gray; 
     color: black; 
     height: 100%; 
     display: block; 
     overflow-y: auto; 
     margin: 20px 0 20px 0; /* top and bottom margins must be the height of your header/footer, respectively */ 
    } 
    .footer { 
     width: 900px; 
     background: black; 
     color: white; 
     min-height: 20px; 
     display: block; 
     position: fixed; 
     bottom: 0; 
     z-index: 1000; 
    } 
    </style> 
</head> 
<body> 
    <div class="wrap"> 
     <div class="head"> 
      <!-- your header content--> 
      test 
     </div> 
     <div class="content"> 
      <!-- main content, scrollable --> 
      test 
     </div> 
     <div class="footer"> 
      <!-- your footer content --> 
      test 
     </div> 
    </div> 
</body> 
</html>

il ne me semble pas que vous essayez d'utiliser un pied de page collante, de sorte que vous pouvez simplement utiliser position: fixed; bottom: 0 pour y maintenir.

puisque vous portez votre <div id="outer"> avec une hauteur/min-hauteur de 100%, sa dérive sa hauteur des éléments parents, c'est pourquoi vous obtenez la barre de défilement. html, body {overflow: hidden} prend soin de cela.

pour votre contenu, ajoutez overflow-y: auto

la seule partie délicate est que vous devez avoir la marge supérieure et déclarations bas de sorte que vous n'avez pas le contenu étant chevauché par votre tête et pied de page. peut-être un javascript pour choisir dynamiquement vos hauteurs d'en-tête/pied de page et les ajouter à vos marges de contenu.

est-ce que cela se rapproche?

Source

2010-10-18 16:08:43 davidg

Je suppose que vous n'avez pas besoin d'avoir votre position d'en-tête: fixe. juste une idée. – davidg

Mise en page CSS pour en-tête, pied de page et le contenu avec la barre de défilement

Répondre

Questions connexes