Comment obtenir CSS3 gradient de durée de la hauteur de la page entière, et pas seulement de la fenêtre d'affichage?

J'ai un cross-browser CSS gradient, comme ceci:

#background {
    background: #1E5799; /* old browsers */
    background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */
}

Mais j'en ai besoin pour couvrir la hauteur de la page entière, et pas seulement de la fenêtre d'affichage. En d'autres termes, j'ai besoin d'appliquer le style à un élément qui a la même hauteur que l'ensemble de la page, ce qui est généralement body ou html.

Autres complications:
Je suis également en utilisant le collant pied de page, ce qui nécessite html et body à être fixée à 100% de la hauteur. Donc, en appliquant le style à eux seuls la fenêtre d'affichage rempli.

Je ne suis même pas sûr si ce que je demande est possible, mais toute aide serait appréciée.

OriginalL'auteur Herman Schaaf | 2011-01-11

  1. 8
    html body {
   min-height: 100%;
}

    Il fera l'affaire, le min-height propriété s'étend sur la hauteur totale, même si la page est scrollable, mais la hauteur de propriété définit la hauteur de la vue active-port à 100%.

    Cela fonctionne de la croix-navigateur!

    Min-height sur le html et les éléments du corps était la bonne solution. Bien sûr, cela ne fonctionnera pas dans IE6, mais je vais vivre avec ça.

    OriginalL'auteur Praz

  2. 6

    Basé sur les Kyle solution, ainsi que les autres styles de la collant pied de page, voici la solution qui a finalement travaillé:

    .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -250px;
 background: #1E5799; /* old browsers */
    background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */ } /* corresponds to height of #footer */

#body-wrapper {

    height: 100%;
    width: 100%;
}

    Avec le code html suivant:

    <body>
<div id="body-wrapper">
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>
</div>
</body>
    C'est utile, Ça n'a pas fonctionné pour moi parce que mon wrapper pour collant, pied de page est 1050px largeur fixe, j'ai donc simplement ajouté à votre corps div wrapper autour d'elle et de mettre en dégradé.Même formulaire html venez d'ajouter un dégradé à corps-wrapper au lieu de wrapper.Merci

    OriginalL'auteur Herman Schaaf

  3. 5

    Une autre option si vous voulez que le dégradé à l'échelle de votre fenêtre, mais être maintenu lorsque vous faites défiler. Ainsi, au lieu de le gradient tracé de la totalité de la hauteur du document, il reste seulement par rapport à ce qui est visible. (Essayez, vous verrez ce que je dis)

    background-attachment: fixed;

    OriginalL'auteur chainwork

  4. 3

    Vous pouvez rassembler l'ensemble du contenu de la page dans un div, puis définissez-la à qui. De cette façon, l'emballage div va se remplir avec l'ensemble de votre contenu et de l'arrière-plan s'étendre sur toute la page.

    HTML:

    <body>
<div id="background-wrapper">
<!--all your content-->
</div>
</body>

    CSS:

    #background-wrapper {
    background: #1E5799; /* old browsers */
    background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */
    height: 100%;
    width: 100%;
}

    Qui devrait le faire 🙂

    +1 Pour m'envoyer dans la bonne direction, mais à la fin, qui n'a pas assez de travail.
    Hey, content que cela a aidé d'une certaine façon 🙂

    OriginalL'auteur Kyle

  5. 2

    vous n'avez pas besoin d'un wrapper:

    CSS:

    body{
    width: 100%;
    height:100%;
    background-repeat:no-repeat !important;
    margin:0; padding:0;
    background: #603813; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28abe2', endColorstr='#ffffff'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#28abe2), to(#ffffff)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #28abe2,  #ffffff); /* for firefox 3.6+ */

}

    exemple de code HTML:

    <body>

 <div id="headerBG">
  content goes here  content goes here  content goes here  content goes here
  content goes here  content goes here  content goes here  content goes here 
  content goes here  content goes here  content goes here  content goes here
  content goes here  content goes here  content goes here  content goes here 
 </div>

 <div id="container"><!--start container-->
  <div id="content"<!--start content-->
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
  </div><!--end content-->
 </div><!--end container-->

</body>

    Le gradient de ne pas s'afficher si vous n'avez pas de contenu à l'intérieur de votre divs! 🙂 Espérons que cette aide!

    Cela ne fonctionne pas si le contenu s'étend de la fenêtre d'affichage...
    Cela devrait fonctionner, mais malheureusement ne fonctionne pas dans FireFox.

    OriginalL'auteur LS1

  6. -3
    html, body {line-height:1.5;background:#23538a;

background: -moz-linear-gradient(top,  #ffffff 0%, #23538a 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#23538a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#23538a 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#23538a 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#23538a 50%); /* IE10+ */
background: linear-gradient(top,  #ffffff 0%,#23538a 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
}`
    Qu'est-ce que tous les line-height balivernes?

    OriginalL'auteur BAM