web-dev-qa-db-fra.com

Hauteur absolue des DIV 100%

J'y travaille depuis quelques heures et la recherche sur le Web et le stackoverflow ne m'ont pas beaucoup aidé. Comment faire pour que #gradient et #holes remplissent la page entière?

J'ai utilisé la fonctionnalité Inspecter un élément dans Safari et lorsque je mets en surbrillance l'élément body, il ne remplit pas toute la fenêtre.
alt text http://img534.imageshack.us/img534/9955/screenshot20100201at215.png

HTML:

<body>

    <div id="gradient"></div>
    <div id="holes"></div>

    <div id="header">Header Text</div>
</body>

CSS:

html, body {
    height:100%;

    margin:0;
    padding:0;
}

body {
    background-image:url(../Images/Tile.png);
    background-color:#7D7D7D;
    background-repeat:repeat;
}

#gradient {
    background-image:url(../Images/Background.png);
    background-repeat:repeat-x;

    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    right:0px;
}

#holes {
    background-image:url(../Images/Holes.png);
    background-repeat:repeat;

    position:absolute;
    top:2px;
    left:2px;
    height:100%;
    right:0px;
}

#header {
    background-image:url(../Images/Header.png);
    background-repeat:repeat-x;

    position:absolute;
    top:0px;
    left:0px;
    width:100%;

    padding-top:24px;
    height:49px; /* 73 - padding */

    color:rgb(113, 120, 128);
    font-family:Helvetica, Arial;
    font-weight:bold;
    font-size:24px;
    text-align:center;
    text-shadow:#FFF 0px 1px 0px;
}
csshtmlheightabsolute
23
woody993

Eh bien, il me semble que votre élément avec tout le contenu est flottant. Si c'est le cas, son corps ne va pas agrandir le corps à moins qu'il ne soit nettoyé. 

3
prodigitalson

Notez que la propriété hauteur spécifiée dans pourcentage est calculée avec le respect du bloc conteneur ..qui ne doit pas nécessairement être l'ancêtre immédiat - " Le bloc conteneur d'une boîte positionnée est établi par l'ancêtre positionné le plus proche ou, s'il n'en existe pas, par le bloc initial contenant " . Je parie que c'est ce qui se passe dans le cas du questionneur puisqu'il n'y a pas d'ancêtre positionné (celui avec position: réglé soit sur relative ou absolute).

Donc, le "bloc contenant" se résout en le bloc contenant initial qui correspond aux dimensions de la fenêtre (fenêtre). Régler position:relative sur body tiendra compte de la hauteur de body et étendra complètement le contenu en position absolue le long de body.

Plus d'informations sur le bloc contenant ici.

36
Adam

J'avais le même problème. Corrigé en changeant de position: absolu en position: fixe.

16
Doug Hamlin

[mettre à jour]
nouvelle approche
.__ Cela devrait le faire ..

utiliser display:table sur vos 2 éléments devrait le faire (cela fonctionne dans mes tests). (mais vous devrez assigner des valeurs de largeur maintenant ..

Cependant, je ne suis pas sûr que vous deviez définir des éléments imbriqués sous forme de tableau-cellule, etc.

Essayez cependant ..

ancienne version non opérationnelle
Avez-vous essayé sur #gradient et #holes les suivants?

#gradient {
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}
#holes{
  height:auto!important;
  height:100%;
  min-height:100%;
  ..
  ..
}
3
Gabriele Petrioli
$('div.class').css({'height':(($(document).height()))+'px'});
2
beacks

Avez-vous essayé de vous installer comme ça?

#holes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Étire l'élément pour remplir toute la surface de la page

1
Pete B

Le meilleur moyen est d'utiliser javascript. min-height n'est pas supporté par tous les navigateurs. 

Javascript utilisant un prototype:

<script type="text/javascript">
var height = $(document.body).getHeight();
document.write('<div id="yourdiv" style="height:'+height+'px;width:100%;"></div>');
</script>
1
sabansaulic

Appliquez les styles CSS à #gradient & #holes et placez le script après votre DIV.

.background-overlay{
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}

<body>
    <div id="gradient"></div>
    <div id="holes"></div>

    <script type="text/javascript">
        $(document).ready(function() {
            var bodyHeight = $("body").height();
            $('#gradient,#holes').height(bodyHeight);

        })
    </script>


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

0
Amresh Raut

Je pense que vous avez bien fait les choses. Cela fonctionne dans Chrome (WebKit aussi!) Et dans IE7/8/Quirks à chaque fois que vous mettez width: 100% sur #gradient et # trous, impossible de tester le safari sur Mac pour le moment vous devriez le voir correctement. 

Cela dit, c'est peut-être un problème de doctype, essayez-vous de différents?

0
Francisco Aquino

Pour être honnête, je pense que je vais simplement overflow:auto sur mon contenu afin que la page entière ne nécessite pas de défilement

0
woody993