position: absolute, div en vertu de la div

J'ai 3 divs, chacun d'eux a position: absolute.

Première est d'en-tête, et de son travail.

En-tête a hauteur constante, et la deuxième div "contenu" fonctionne aussi.

Troisième div est "pied de page".

"Contenu" a hauteur variable et quand le "contenu" est plus élevé que web-fenêtre du navigateur sur le "pied de page" est SUR "contenu". Je veux "pied de page" à la rubrique "contenu" quel que soit le contenu de la hauteur.

Mon en-tête est 300px de hauteur, le contenu a margin-top: 300px. Je ne peux pas utiliser le même pour le pied de page, parce que le contenu n'a pas de hauteur constante.

Je ne veux pas mis un div avec position: absolute, et ces 3 divs place à l'intérieur de celui-ci.

div#header{
  width: 960px;
  height: 200px;
  left: 50%;
  margin-left: -480px;
  position: absolute;
 }

div#content{
 width: 960px;
 border: 1px solid black;
 left: 50%;
 margin-left: -480px;
 position: absolute;
 margin-top: 200px;
 }

div#footer{
  width: 960px;
  height: 30px;
  left: 50%;
  margin-left: -480px;
  position: absolute;
  bottom: 10px; /*with this i've div fixed to the bottom of web-browsers' window */
  clear: both;
  }

Pourriez-vous s'il vous plaît ajouter un code d'exemple à la question?
Vous pouvez aussi créer des "violons" ici: jsfiddle.net pour des exemples.
paste.org/42377

OriginalL'auteur aptyp | 2011-12-16

css

3

Vous êtes sur le positionnement.

Vous n'avez pas besoin de position tout absolument, sauf si il ya quelque chose que vous n'êtes pas le partage.

JSBin Exemple

OriginalL'auteur Scott

Si vous êtes prêt à utiliser position : relative qui est un peu mieux que position : absolute dans ce cas, http://jsfiddle.net/vFTXg/1/ - Essayez de modifier la valeur de votre contenu, la hauteur d'ici et votre pied de page sera automatiquement ajusté.

CSS

.header {
    position : relative;
    width : 100%;
    height : 90px;
    background-color : #000;
}
.content{
    position:relative;
    width : 100%;
    min-height : 200px;
    background-color : #f00;
}
.footer{
    position:relative;
    width : 100%;
    height : 50px;
    background-color : #0f0;
}

HTML

<div class='header'></div>
<div class='content'></div>
<div class='footer'></div>

OriginalL'auteur Ashwin Krishnamurthy

0

Je recommande l'utilisation de CSS flotteurs

Faire quelque chose comme ceci:
```
<div id="wrapper">
    <div id="header">...</div>
    <div id="content">...</div>
    <div id="footer">...</div>
    <div class="clear"></div>
</div>
```
Ensemble du site-largeur de l'emballage et de laisser les autres divs ont la même largeur.

Utilisation float:left sur l'en-tête, contenu et pied de page

Ensemble clear:both sur le clair-div.

Maintenant, vous pouvez régler la hauteur sur les éléments que vous voulez avoir une hauteur fixe - et vous n'avez pas à s'embêter avec le positionnement absolu.. Si vous insistez sur l'utilisation de positionnement, vous pouvez simplement la position de l'emballage.

c'est ce que je ne veux pas l'utiliser, mais si u est recommandé. thx
Si vous utilisez overflow: hidden sur le #wrapper, vous n'avez pas vraiment besoin de la claire div.

OriginalL'auteur Jach0
0

Dans le futur navigateur peut calculer. Pour votre exemple, cela pourrait être sympa pour calculer le min-height pour le contenu de définir la foorter vers le bas si le contenu de la hauteur est faible et pour définir le pied de page après le contenu si il a une hauteur de la valeur. E. g.:

HTML:
```
<div id="header" class="content">header</div>
<div id="content" class="content">content</div>
<div id="footer" class="content">footer</div>
```
CSS:
```
html, body {
    height: 100%;
}
.content {
    position: relative;
    width: 960px;
}
#header {
    height: 200px;
}
#content {
    border: 1px solid black;
    min-height: -moz-calc(100% - 302px);
    min-height: -webkit-calc(100% - 302px);
    min-height: calc(100% - 302px);
}
#footer {
    height: 100px;
}
```
Malheureusement seulement firefox et IE9 et plus de soutien calc en ce moment, donc c'est plus théorique. Si vous voulez le tester, voir ce jsfiddle.

Si vous voulez faire cela avec tous les navigateur actuel, vous devez utiliser javascript.

Je ne savais pas à ce sujet. Quid des performances? Ceux-ci sont calculés tous les temps.

OriginalL'auteur scessor

Si vous voulez quelque chose de largeur constante et centrée essayer cette

#footer,
#header,
#footer {
    width: 960px;
    margin: 0 auto;
}

et oublier

left: 50%;
margin-left: -480px;
position: absolute;

OriginalL'auteur yunzen

Vous devez vous connecter pour publier un commentaire.