creare un div che si estenda per tutta la pagina

**pietro09** · 10-10-2008, 18:11

:master: Purtroppo non sono mai riuscito a fare bene quello che vorrei.

Un div in posizione assoluta, che si estenda per tutta la pagina, compresa la parte eventualmente non visibile a destra della finestra attiva e sotto.

Mi potreste dare una mano?

**Xinod** · 11-10-2008, 02:12

questo e' quanto presente al riguardo in lightbox,
mi sembra faccia al caso tuo

codice:

// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.com
// Edit for Firefox by pHaez
//
function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	
//	console.log(self.innerWidth);
//	console.log(document.documentElement.clientWidth);

	if (self.innerHeight) {	// all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth; 
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

//	console.log("xScroll " + xScroll)
//	console.log("windowWidth " + windowWidth)

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = xScroll;		
	} else {
		pageWidth = windowWidth;
	}
//	console.log("pageWidth " + pageWidth)

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

**pietro09** · 11-10-2008, 05:03

Ti ringrazio

Ciao

**pietro09** · 11-10-2008, 06:42

purtroppo non va bene, in nessub browser.

Utilizzando lightbox con immagini che si estendono in larghezza e altezza (in cui sia necessario fare uno scroll) il div non copre tutta l'area
Chissà, forse ho una versione vecchia

**Xinod** · 11-10-2008, 14:17

tralasciando le dimensioni del contenuto caricato dopo, che puo' estendere l' area scrollabile del documento,
al momento di generare la copertura semi-trasparente mi sembra che essa si estenda anche oltre la viewport, se necessario,
e a tutta la viewport, nel caso di documenti dalle dimensioni inferiori ad essa

**pietro09** · 11-10-2008, 15:12

:master: non so, a me non va. Forse non ho l'ultima versione della libreria.

**cavicchiandrea** · 11-10-2008, 16:24

Io per un problema analogo (se ho capito bene coprire tutta la pagina non solo lo schermo) ho risolto in maniera diversa. Invece di rilevare le dimensione del documento/pagina ho tolto lo scroll al body nel momento che lanciavo la funzione.
Vantaggi non c'è quello sfarfallio che fa quando scrolli la pagina a trasparenza attiva, svantaggi (possibili) se l'immagine/div che mostri sopra la trasparenza e più grande dello schermo potrebbe venir tagliata.

Se la soluzione non è di tuo gradimento o non è possibile come non detto

**pietro09** · 11-10-2008, 16:58

se mi mandi un po' di codice sarà ancora di più gradimento

In effetti questo div mi serve solo per disinibire tutta la pagina, perciò credo che la tua idea sia molto interessante.

ps. però, visto che sono curioso, mi piacerebbe capire come si fa, dato che ho visto che lo si fa comunemente.
ciao

**cavicchiandrea** · 11-10-2008, 20:58

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>Documento senza titolo</title>
<style media="screen" type="text/css">
#oscura{
	width: 100%;
	position: absolute;
	background-color: #666666;
	z-index: 100;
	height: 100%;
	-moz-opacity:.7;
	filter:alpha(opacity=70);
	opacity:0.7;
	visibility: hidden;
	left: 0px;
	top: 0px;
}

</style>
<script type="text/javascript">

function oscura(){
document.getElementById("oscura").style.visibility='visible';
document.body.style.overflow="hidden";
document.getElementsByTagName("html")[0].style.overflow="hidden";
}
</script>

</head>

<body>
<div id="oscura"></div>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


oscura</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>
</body>
</html>

Handicap scoperto ora devi ricaricare la pagina se il link d'attivazione e fuori dalla schermata iniziale.

**pietro09** · 12-10-2008, 06:40

Ti ringrazio. Ciao.

Discussione: creare un div che si estenda per tutta la pagina

Strumenti discussione

Ricerca discussione

Visualizza

creare un div che si estenda per tutta la pagina

Permessi di invio