Come ottenere gradienti CSS3 per coprire l'altezza dell'intera pagina, non solo la finestra?

Ho un gradiente CSS cross-browser, come ad esempio questo:Come ottenere gradienti CSS3 per coprire l'altezza dell'intera pagina, non solo la finestra?

#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 */ 
}

Ma ho bisogno di coprire l'altezza di tutta la pagina, non solo la finestra. In altre parole, ho bisogno di applicare lo stile a un elemento che ha la stessa altezza dell'intera pagina, che di solito sarebbe body o html.

Ulteriori complicazioni: Sto anche utilizzando il sticky footer, che richiede html e body da impostare l'altezza al 100%. Quindi, applicando lo stile a loro, solo il viewport viene riempito.

Non sono nemmeno sicuro se ciò che sto chiedendo sia possibile, ma qualsiasi aiuto sarebbe apprezzato.

fonte

2011-01-11 Herman Schaaf

Sulla base di soluzione di Kyle, così come gli altri stili dal sticky footer, qui è la soluzione che ha funzionato alla fine:

.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%; 
}

Con il seguente codice HTML:

<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>

fonte

2011-01-11 13:21:15

Questo è utile, non ha funzionato per me perché il mio wrapper per sticky footer ha una larghezza fissa di 1050px, quindi ho appena aggiunto il wrapper del tuo corpo intorno e ho messo il gradiente su quello. Lo stesso modulo html ha appena aggiunto un gradiente a body-wrapper invece di wrapper.Grazie – formatc

È possibile avvolgere l'intero contenuto della pagina in un div di sfondo, quindi impostarlo. In questo modo il div wrapping si riempirà di tutti i tuoi contenuti e lo sfondo si espanderà su tutta la pagina.

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%; 
}

che dovrebbe farlo :)

fonte

2011-01-11 12:25:29 Kyle

+1 Per avermi inviato nella giusta direzione, ma alla fine non ha funzionato. –

Ehi, felice che abbia aiutato in qualche modo :) – Kyle

non hai bisogno di 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+ */ 

}

HTML di esempio:

<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>

La pendenza non lo farà mostra se non hai alcun contenuto all'interno dei tuoi div! :) Spero che questo ti aiuti!

fonte

2011-06-06 16:21:08 LS1

Questo non funziona se il contenuto estende la vista ... –

Questo dovrebbe funzionare, ma purtroppo non in FireFox. – superluminary

-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 */ 
}`

fonte

2011-11-18 08:23:43 BAM

Che cos'è tutto il malarkey line-height? – superluminary

Un'altra opzione se si desidera che il gradiente venga scalato SOLO sulla vista ma che venga mantenuto quando si scorre. Quindi, invece del gradiente che traccia l'intera altezza del documento, rimane relativo solo a ciò che è visibile. (Provalo vedrai quello che sto dicendo)

background-attachment: fixed;

fonte

2012-05-04 18:02:22 chainwork

html body { 
    min-height: 100%; 
}

Si farà il trucco, la proprietà min-height estende l'altezza totale, anche se la pagina è scorrevole, ma la proprietà altezza imposta l'altezza di vista attiva -portare al 100%.

Questo funziona cross browser!

fonte

2012-09-11 03:10:20 Praz

L'altezza minima degli elementi html e del corpo era la soluzione corretta. Certo che non funzionerà in IE6, ma vivrò con quello. – superluminary

Come ottenere gradienti CSS3 per coprire l'altezza dell'intera pagina, non solo la finestra?

risposta

Problemi correlati