CSS en-tête, menu, contenu et pied de page de la position

J'ai la page suivante:

<body>
<div id="wrap">

    <div id="header"></div>

    <div class="undef">
        <div class="top_h"></div>

    <div id="menu">
               <ul>
               <li>Menu item</li>
           <li>Menu item</li>
           <li>Menu item</li>
           <li>Menu item</li>
           <li>Menu item</li>
           <li>Menu item</li>
           <li>Menu item</li>
           <li>Menu item</li>
        </ul>

    <div class="bottom_h"></div>

 </div>

    <div id="page_content">
        <p>         
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis nibh id odio laoreet, nec bibendum erat auctor. Vivamus imperdiet nisi eget nisl blandit lobortis. Nam vestibulum scelerisque nisi, sit amet fermentum metus dapibus ut. Etiam et volutpat eros, sed porttitor elit. Nulla bibendum ornare metus, in venenatis lectus rhoncus sit amet. In hac habitasse platea dictumst. Fusce nibh nulla, rhoncus eget laoreet a, aliquam ac libero. Curabitur tristique porttitor congue. Integer lacinia congue orci quis vestibulum.
        Nulla risus nisi, sodales id augue in, laoreet feugiat orci. Vestibulum fermentum sapien est, eget pretium eros adipiscing vel. Nulla malesuada ornare congue. Suspendisse eget enim et dolor porttitor scelerisque ut eu augue. Duis vitae risus quis est rutrum consectetur pharetra ullamcorper lacus. Suspendisse vestibulum auctor mi, in laoreet libero pellentesque ut. Donec a elit at ligula viverra dictum vel feugiat elit.
        </p>


    <div class="bottom_h"></div>
    </div>

</div>
    <div id="footer"></div>

</div>



</body>
</html>

Et le code css suivant:

* {
margin: 0px;
padding: 0px;
border: none; 
}
html, body {
background-color: yellow;
height: 100%;
}
#header {
position: absolute;
height: 100px;
width: 100%;
background: #335599;
border-bottom-color: #ffffff;
border-bottom-style: solid;
border-bottom-width: 1px;
z-index: 100;
}
#footer {
height: 60px;
width: 100%;
background-color: #dd1155;
border-top-color: #ffffff;
border-top-style: solid;
border-top-width: 1px;
z-index: 1000;
}
#wrap {
position: relative;
height: 100%;
}
#wrap_content {
}
.undef {
width: 100%;
}
.top_h {
height: 100px;
}
.bottom_h {
height: 60px;
}
#page_content {
padding-left: 150px;
position: relative;
color: #FFFFFF;
background-color: #000000;
}
#menu {
height: 100%;
position: relative;
float: left;
background-color: #1188FF;
border-right-color: #ffffff;
border-right-style: solid;
border-right-width: 1px;
z-index: 10;
}
#menu ul {
list-style: none;
display: block;
min-height: 200px;
}
#menu ul li {
width: 150px;
height: 25px;
padding-top: 10px;
padding-bottom: 4px;
text-align: center;
background-color: #992277;
border-bottom-color: #000000;
border-bottom-width: 1px;
border-bottom-style: solid;
font-family: Cambria;
}
#menu ul li:hover {
background-color: #167322;
color: #ffffff;
}

Je veux créer une page uniquement à l'aide de css, qui est la suivante:

  1. en-tête hauteur = 100px; doit toujours être sur le haut de la page(cette partie fonctionne bien)
  2. pied de hauteur = 60px; doit toujours être sur le bas de la page (même si on n'a pas assez de contenu. Si le contenu de la page ou le menu ont beaucoup de contenu et le navigateur barre de défilement s'affiche ensuite le pied de page doit encore être placés sur le fond).
  3. le menu doit être dans la partie gauche de la page et a une largeur de 150 px avec des éléments définis comme dans l'exemple(cette partie est aussi bien fonctionner)
  4. le contenu de la page devrait s'étendre sur le reste de l'espace (il est affiché avec le noir. Quand tout le reste de l'espace est noir au lieu de jaune, alors il devrait être ok)

Aussi la page doit modifier dynamiquement si le navigateur de la taille de la fenêtre est modifiée. La solution doit être compatible avec les navigateurs, mais si cela fonctionne pour firefox ou/et chrome alors tout est ok.

J'ai essayé de le faire à l'aide d'un tas de trucs, mais aucun d'entre eux travaillaient. Est-il possible de faire quelque chose comme ceci en utilisant uniquement css 2.0?

InformationsquelleAutor Sebastian Strajan | 2013-11-21
  1. 1

    Ici est un violon de ma résolution: http://jsfiddle.net/6rVsE/

    2

    ajouter à #footer: 

    position:fixed; bottom: 0px;

    3

    ajouter à: #menu: 

    width: 150px;

    ajouter à: #menu ul li:

    width: 100%;

    4

    parce que vous faites par rapport: je voudrais résoudre ce en Javascript. Cet exemple est l'utilisation de jQuery.

    $("#page_content").css("height", $(window).height() - $("#header").height() - $("#footer").height() +"px");
    • Je ne veux pas utiliser de js ou jquery pour résoudre le contenu de la page hauteur relative, car je ne peux pas l'utiliser. Il doit être pur css.
    • J'ai déjà essayé avec le fixe de pied de page, mais si j'ai trop de contenu, puis le pied de page reste en bas de la page, mais pas à la fin du contenu de la page(je faisais allusion à cette fin). Merci quand même pour la réponse!
    • Avez-vous pensé à prendre le #contenu de la page et de donner float:right?
    • si vous pouvez DÉFINIR #undef avec une sorte de hauteur définie, il peut vous mettre un peu plus près. jsfiddle.net/6rVsE/3, vous obtiendrez un peu plus près. Il change #menu flotter à gauche, puis la hauteur de la #contenu de la page est de 100% de la page... #undef, et #undef est réglée à 100% ou certains de hauteur définie. Si elle est réglée à 100%, bien que, il y a un offeset, par la hauteur de l'en-tête.
    • si j'utilise le calc de css3 je peux régler la hauteur de l'fnud hauteur: calc(100% - 160px);... cela va m'apporter un peu plus près, mais si j'ai beaucoup d'éléments dans le menu permet de dire que 30... alors si je scroll vers le bas, puis la partie jaune de l'arrière-plan commence à se montrer de nouveau... que je ne veux pas... je voudrais que la hauteur sera calculée relativement à l'ouverture de la page avec tout le contenu et pas seulement ce que vous pouvez voir dans la fenêtre lorsque la page est chargée... (le float:droit - j'ai essayé, mais ne serait pas d'une grande utilité raison pour laquelle j'ai utilisé padding-left:150px;
    InformationsquelleAutor Fallenreaper
  2. 1

    comment sur:

    #header, #menu, #content, #footer {
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
}
#header {
height:100px;
z-index:9999;
}
#menu {
width:150px;
padding:100px 0 60px; /* account for header, footer */
z-index:9997;
}
#content {
padding:100px 0 60px 150px; /* account for header, menu, footer */
z-index:9996;
}
#footer {
height:60px;
top:inherit;
bottom:0;
z-index:9998;
}

    html:

    <body>
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
    • l'approche statique tronque supprime tout le contenu supplémentaire de la page. Il peut sembler assez vide, mais avec le contenu ajouté qu'il ne regarde pas de cette façon. Merci pour votre réponse!
    InformationsquelleAutor peterchon