Immagine di sfondo che copre la finestra del browser meno l'intestazione e il piè di pagina below the fold

Il titolo potrebbe essere un po 'confuso, farò del mio meglio per spiegare cosa devo ottenere. Fondamentalmente ho i seguenti elementi a una particolare pagina web:Immagine di sfondo che copre la finestra del browser meno l'intestazione e il piè di pagina below the fold

Header - sempre visibili al di sopra dei contenuti
Contenuto - immagine di sfondo copre l'intera area dei contenuti - questa è la parte fondamentale
Sub- piè di pagina - informazioni sul contenuto sempre visibile sotto di esso
footer - footer aziendale standard, visibile se l'altezza della finestra è di una certa dimensione, altrimenti è necessario scorrere verso il basso per vederlo

Come detto sopra, la parte del contenuto della pagina è forse la parte più difficile. Ho bisogno di un'immagine grande per essere sullo sfondo che copre l'intera area. css-tricks ha un excellent guide in the ways to do full page background images. Quindi spero che questo possa essere raggiunto facilmente. Il problema è come fare in modo che il sottolivello rimanga nella parte inferiore se la finestra è < 720px con il piè di pagina sotto di esso sotto la piega (che necessita di scorrere fino ad esso). Una finestra> 720px dovrebbe mostrare sia il sub-footer che il footer senza barre di scorrimento.

Non sarà nemmeno preoccuparsi a questo punto circa un'altezza minima il contenuto deve essere (eventualmente richiedendo scorrimento sul contenuto <div> o rendendo sia il sub-piè e piè andare sotto la piega).

Ecco mockup immagine di quello che sto cercando di realizzare:

In primo luogo - una finestra < 720px di altezza in cui il piè di pagina deve scorrere a: <720px tall window where the footer needs to be scrolled to

In secondo luogo - una finestra < 720px di altezza che è stato fatto scorrere verso il basso per vedere il piè di pagina: enter image description here

Infine - una finestra di altezza> 720px che non ha le barre di scorrimento, perché tutto è visibile: enter image description here

Sto usando jQuery e non mi interessa di IE6. Posso ottenere questo in CSS? Devo usare jQuery per regolare dinamicamente le cose? Gli sfondi della pagina intera sono facilmente realizzabili con css3, sono felice di usare css3 o html5 per fare ciò di cui ho bisogno.

fonte

2011-01-25 at.

Perché non sarà un min-height sul lavoro contenuti per voi? – nemophrost

Poiché il sottolivello non si troverà sempre nella parte inferiore e il piè di pagina non sarà sempre proprio sotto la piega per gli schermi <720px e ancorato nella parte inferiore per gli schermi> 720px. –

Non vedo davvero il problema ..hai un'intestazione posizionata in modo assoluto con un alto indice z. poi una normale area di contenuto e infine un footer che - nel caso in cui le tue bg-images abbiano tutte la stessa dimensione - risiederà sotto il piè di pagina. o vuoi che le bg-immagini vengano ridimensionate? una opzione sarebbe andare con @ media-query ... – tobiasmay

Non è assolutamente possibile utilizzare CSS position: fixed perché è sempre relativo al viewport, non all'elemento padre.

Quello che devi fare è avere il "subfooter" come elemento figlio posizionato fisso di "contenuto". Per fare ciò, dovrai usare Javascript.

Qualcosa di simile dovrebbe fare quello che ti serve. Provare a cambiare la variabile altezza nel CSS per #content modo da poter vedere come si comporta con diverse altezze di contenuto:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<style> 
    #header { 
     height: 50px; 
     background-color: #ccc; 
     width: 100%; 
     margin-bottom: 10px; 
    } 

    #content { 
     position: relative; 
     height: 1500px; 
     width: 100%; 
     background-color: #ccc; 
    } 

    #subfooter { 
     height: 50px; 
     width: 100%; 
     background-color: #666; 
     position: fixed; 
    } 

    #footer { 
     height: 50px; 
     width: 100%; 
     margin-top: 10px; 
     background-color: #ccc; 
    } 
</style> 
<script> 
    $(document).ready(function(){ 

     $(document).scroll(function() { 
      position_subfooter(); 
     }); 

     var position_subfooter = function() { 
      $("#subfooter").css("bottom", "20px"); 
      if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrollTop() + $("#content").height())) { 
       $("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrollTop() + $("#content").height()) + 20)); 
      } 
     } 
     position_subfooter(); 
    }); 
</script> 
</head> 
<body> 
    <div id="header"> 
     <h1>HEADER</h1> 
    </div> 
    <div id="content"> 

    </div> 
    <div id="subfooter"> 
     <h2>SUB FOOTER</h1> 
    </div> 
    <div id="footer"> 
     <h1>FOOTER</h1> 
    </div> 
</body> 
</html>

fonte

2011-01-25 18:46:11

Immagine di sfondo che copre la finestra del browser meno l'intestazione e il piè di pagina below the fold

risposta

Problemi correlati