div che si estende per tutta la pagina

**pietro09** · 11-08-2007, 21:05

ho una pagina html che, per semplicità, la genero con asp.
Questa pagina ha una tabella con tante righe e colonne da essere più grande della finestra di visualizazione.
Alla fine ho un div semitrasparente che si dovrebbe estendere per tutta la pagina. Però si estende solo per la parte visibile. Facendo uno scroll orizzontale o verticale si può notare.

La domanda è: come fare per estendere il div per l'estensione della pagina totale?

Ecco la pagina di esempio:

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>
    <title>Pagina senza titolo</title>
</head>
<body>

<script>
    
</script>

<table border="0">
<% for i=1 to 10 %>
        <tr>
        <%for j = 1 to 10%>
            <td><div style='border:1px red solid;width:200px;height:200px'><%=i%>, <%=j %></div></td>
        <% next %>
        </tr>
<% next %>
</table>
<div style="position: absolute; left: 0px; top: 0px; z-index: 10000;width:100%; height:100%;left:0px;top:0px;text-align:center;background-color:Gray;filter: alpha(opacity=75);opacity:0.7;-moz-opacity: 0.75;"></div>
</body>
</html>

Il risultato è in: http://web.tiscali.it/archivio_esemp...nsione_div.htm

**cavicchiandrea** · 12-08-2007, 01:05

cosi funziona spero vada bene:

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>
    <title>Pagina senza titolo</title>
</head>
<body>

<script>
    
</script>

<table border="0" id="tab">
<% for i=1 to 10 %>
        <tr>
        <%for j = 1 to 10%>
            <td><div style='border:1px red solid;width:200px;height:200px'><%=i%>, <%=j %></div></td>
        <% next %>
        </tr>
<% next %>
</table>
<script>document.write('<div style="position: absolute; left: 0px; top: 0px; z-index: 10000;width:'+document.documentElement.scrollWidth+'px; height:'+document.documentElement.scrollHeight+'px;left:0px;top:0px;text-align:center;background-color:Gray;filter: alpha(opacity=75);opacity:0.7;-moz-opacity: 0.75;"></div>')</script>
</body>
</html>

**pietro09** · 12-08-2007, 06:11

Ciao Andrea

Ti ringrazio davvero dello spunto. Dunque, finalmente funziona come ci si aspetta in IE7, Firefox2 e Opera9.
Con IE7, togliendo il DOCTYPE non funziona più (come ci si aspetta) ma l'essenza della tua soluzione rimane tutta. Adesso procedo con le mie gambe. Provo a trasformare il tuo codice in una funzione e vediamo

**pietro09** · 12-08-2007, 11:30

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>
    <title>Pagina senza titolo</title>
    <script type="text/javascript">
function GetScrollHeight()
{
    if (document.compatMode && document.compatMode != "BackCompat")
	    return document.documentElement.scrollHeight;
    else
	    return document.body.scrollHeight
}


function GetScrollWidth()
{
    if (document.compatMode && document.compatMode != "BackCompat")
	    return document.documentElement.scrollWidth;
    else
	    return document.body.scrollWidth

}
    
    </script>    
</head>
<body>


<table border="0">
<% for i=1 to 10 %>
        <tr>
        <%for j = 1 to 10%>
            <td><div style='border:1px red solid;width:200px;height:200px'><%=i%>, <%=j %></div></td>
        <% next %>
        </tr>
<% next %>
</table>

<script type="text/javascript">

document.write('<div style="position: absolute; left: 0px; top: 0px; z-index: 10000;width:'+ GetScrollWidth() + 'px; height:' + GetScrollHeight() + 'px;left:0px;top:0px;text-align:center;background-color:Gray;filter: alpha(opacity=75);opacity:0.7;-moz-opacity: 0.75;"></div>')


</script>
</body>
</html>

http://www.quirksmode.org/js/doctypes.html

così funziona anche senza il DOCTYPE

Discussione: div che si estende per tutta la pagina

Strumenti discussione

Ricerca discussione

Visualizza

div che si estende per tutta la pagina

Permessi di invio