Estendere un DIV oltre la visibilità della pagina

**Painting Web** · 19-07-2011, 22:26

Salve a tutti, sto sviluppando un sito "orizzontalmente", il mio spazio contenuti è così settato:

codice:

<div style="white-space: nowrap; position: absolute;">

CONTENUTOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

 </div>

Settando in questo modo il div dei contenuto la pagina viene estesa orizzontalmente anche oltre il limite di visibilità e fin qui nessun problema.

Il punto è che io a fondo pagina ho anche un FOOTER che però si estende solo fino alla visibilità della pagina anche se questa è stata estesa dai contenuti... Come posso fare per estendere il footer per la lunghezza della pagina? Purtroppo non posso accedere alla dimensioni in pixel della pagina quindi cerco soluzioni alternative...

Ecco il codice del footer:

codice:

.footer {

position:absolute;
width:100%;
background: url('images/footer.png') #313131;
height: 200px;

}

Colgo l'occasione per fare anche un'altra domanda... Quando la pagina si estende orizzontalmente si crea una scrollbar orizzontale, c'è modo di far scorrere la stessa con la "rotellina" del mouse come se fosse una normale pagina verticale?
Grazie a tutti!

**MicheleWT** · 20-07-2011, 08:02

per lo scrolling con mouse, con jquery è velocissimo
http://css-tricks.com/snippets/jquer...h-mouse-wheel/

per il footer, ma se non setti la width, non prende la larghezza massima?

**Painting Web** · 20-07-2011, 12:05

Invece no MicheleWT, è proprio questo il fatto... Si estende a tutta pagina, ma solo per la parte di pagina che risulta visibile! Come Posso fare?

Grazie intanto per jquery

**MicheleWT** · 20-07-2011, 12:43

beh come primo approccio puoi usare la solita jquery:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var mywidth=$("#mydiv").width();
		$("#footer").width(mywidth);
	});
</script>
</head>

<body>

<div id="mydiv" style="white-space: nowrap; position: absolute;">

CONTENUTOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

 </div>
 
 <div id="footer" style="background-color:#999999; top:50px; position:absolute;" >footer</div>
 
</body>
</html>

**Painting Web** · 20-07-2011, 13:34

Non mi risolve il problema, il DIV viene creato ma di dimensioni ridottissime... E' come se non riuscisse ad accedere alla larghezza della pagina.

Questa soluzione potrebbe funzionare, ma a me non serve la larghezza del div "contents", ma la larghezza dell'intera pagina...

**Painting Web** · 20-07-2011, 13:42

Facendo altre prove penso di aver capito il problema.
Il fatto è che il div "contents", non avendo dimensioni difinite ma ridimensionandosi a seconda del contenuto orizzontale che contiene, non è in grado di fornire a jquery le informazioni esatte sulla sulla larghezza.

Infatti anche settando in questo modo jquery:

codice:

$(document).ready(function() {

var mywidth = ($(window).width()) + ($("#contents").width());
$("#footer").width(mywidth);

});

Non si ottiene nulla di più che la larghezza "visibile" della pagina (quindi l'equivalente di width; 100%)... Come posso risolvere?

**MicheleWT** · 20-07-2011, 15:21

la pagina che ti ho passato funzione, nei browser recente. non ho provato su ie<9 però. cosa non va?

**Painting Web** · 20-07-2011, 15:33

Il problema si pone quando io per allargare il div uso delle immagini. Prova a sostituire al testo "CONTENUTOOOOOOOOO" delle immagini e vedrai che il footer si ristringerà improvvisamente!

**MicheleWT** · 20-07-2011, 15:42

utilizzi float? per le immagini, prova a dare un colore di sfondo al div e vedere se arriva in fondo alla pagina

**Painting Web** · 20-07-2011, 23:57

Mettendo un colore di sfondo al DIV delle immagini il tranquillamente supera la visibilità della pagina quindi non so proprio da che dipende...

Comunque non utilizzo float, le immagini le inserisco una dopo l'altra...
Qualche idea?

Discussione: Estendere un DIV oltre la visibilità della pagina

Strumenti discussione

Ricerca discussione

Visualizza

Estendere un DIV oltre la visibilità della pagina

Permessi di invio