Simple Responsive Design-Comment puis-je créer un post d'en-tête et pied de page, puis de la force de la div du contenu à développer entre eux?

Merci pour regarder.

Je suis en train de faire une très simple responsive HTML mise en page:

HTML:

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

CSS:

#header{
    width: 100%;
    height: 50px;
}

#content{
    width: 100%;
    height: 100%;
}

#footer{
    width: 100%;
    height: 50px;
}

Le produit final devrait être une page qui a un 50px de haut en-tête ancré en haut de l'écran et un 50px de haut pied ancré au bas de l'écran. Entre les deux, le "contenu" div doit s'étendre à remplir l'espace entre l'en-tête et pied de page quelle que soit la taille de l'espace.

J'ai déjà vérifié plusieurs tutoriels sur des "bouts de pieds de page" et, malheureusement, ils ne sont pas tout à fait ce que je suis et qu'ils ne prennent pas en compte le "contenu" div expansion pour remplir l'espace entre en-tête et pied de page.

C'est un proche exemple de ce que je suis après, mais ce site est écrit en Flash:

http://www.wearegolden.co.uk/

Essayez de redimensionner votre écran lorsque vous regardez cette.

Ce qui me manque ici? Merci!

RÉSOLU!

HTML:

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

<div id="content">
    content
</div>

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

CSS:

html, body {height: 100%; margin:0px !important;}

#header{
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: #777;
    z-index: 1;
}

#content{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color:#ffffcc;
    position: fixed;
    top:0px;
    bottom:0px;
    width:100%;
}

#footer{
    background-color: #777;
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    z-index: 1;
}

MERCI!

OriginalL'auteur Matt Cashatt | 2013-08-11

7

sonne comme vous avez juste besoin de fixer l'en-tête et pied de page.
```
header{position:fixed; top:0; z-index:10}
footer{position:fixed; bottom:0; z-index:10}
```
Le corps principal contenu de défilement entre ces éléments fixes, si plus grand que l'espace.

remarque je crois que c'est de bonne pratique de z-index en multiples de 10. Cela vous donne la flexibilité de logement d'un élément dans la pile si l'un est raté.

OriginalL'auteur otherDewi
1

Si vous êtes à la recherche pour une solution simple, vous pouvez positionner l'en-tête et pied de page dans une position fixe en haut et en bas de la page.
```
.header {
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background: #eee;
}

.footer {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    background: #eee;
}
```
Voici un exemple:

http://codepen.io/anon/pen/eCEca

Alternativement, vous aimeriez peut-être quelque chose comme jQuery Mobile persistant de navbars, qui offre ce que vous cherchez: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

OriginalL'auteur Hakan B.

Encore une autre approche consiste à utiliser le positionnement absolu (jsFiddle):

#header, #content, #footer { 
    position: absolute; 
    left: 0; 
    right: 0; 
}

#header {
    height: 50px;
    top: 0;
}

#content {
    top: 50px;
    bottom: 50px;
}

#footer {
    height: 50px;
    bottom: 0;
}

OriginalL'auteur dc5

Vous devez vous connecter pour publier un commentaire.