div grande quanto le dimensioni del browser [era:Div intelligente]

**dupardipal** · 21-03-2008, 18:29

Qualcuno sa dirmi se è possibile usare una funzione o combinazione di css per far in modo che un div prenda la dimesione totale del browser?

Mi spiego meglio

<body>
<div>voglio che questo div prenda le dimensioni totali della finestra del browser</div>
<div>Il contenuto di questo div sarà visibile solo scorrendo la scrollbar</div>
</body>

L'idea è quella di visualizzare un immagine o un animazione intro che andrà ad essere inserita nel "div intelligente", mentre il resto della pagina si vedrà solo scorrendo in basso la finestra del browser.
Ovviamente l'intelligenza sta nel riconoscere la risoluzione del client.
Spero di essermi spiegato :master:

**gengix** · 21-03-2008, 22:17

Di default un div ha width:100% .
La proprietà height la devi dichiarare a 100%, ma per estendersi in altezza il div deve avere del contenuto al suo interno.

**gengix** · 21-03-2008, 22:25

mi correggo, basta dichiarare height:100% anche senza contenuto.

**fcaldera** · 21-03-2008, 22:40

Originariamente inviato da gengix
mi correggo, basta dichiarare height:100% anche senza contenuto.

con quali browser?

**gengix** · 21-03-2008, 22:52

A meno che la mia macchina nn sia fusa, prova scrivere così:

<html>
<head>
<title></title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
div
{
height:100%;
background:#000;
}
</style>
</head>
<body>
<div></div>
</body>

</html>

e prova a guardare se il colore nero ti si estende per tutto lo schermo.
A me si con IE5/IE5.5/IE6 firefox /netscape e opera.

**fcaldera** · 21-03-2008, 23:01

Non si estenderà per niente: il codice che hai postato (anche se il doctype manca e sei in quirk mode) non rende nemmeno un pixel nero.

forse avevi in mente questo

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
          <style>
          html, body, div {
            margin: 0;
            padding : 0;
            height: 100%;
          }         
          </style>
        <title></title>
    </head

<body>
<div style="background: #c00;">test</div>
</body>
</html>

però, così facendo, tu avrai un div alto il 100%; della finestra intera (scrolling compreso) e non della sola parte visibile come vorrebbe dupardipal

**gengix** · 21-03-2008, 23:24

No nn intendevo come hai scritto te, in realtà stavo scrivendo in blocco note ed è per quello che nn ho dichiarato il doctype ecc...
In effetti mi ero meravigliato anche io quando ho visto il risultato iniziale.
Chiedo scusa ho avuto un lapsus. Succede =)

**dupardipal** · 26-03-2008, 18:30

Ce l'ho fatta!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div Nascosto</title>
<style>
* {margin: 0; padding : 0;
height: 100%; text-align:center;}

div.intelligente{background-color:red;}

p{margin-top:20px; font-size:25px;}

div.nascosto{height:300px;
background-color:black; color:white;}
</style>

</head

<body>
<div class="intelligente">

DIV INTELLIGENTE SOPRA</p></div>
<div class="nascosto">

DIV NASCOSTO CON ALTEZZA FISSA</p></div>
</body>
</html>

Ma non so se va con tutti i browser... ho i miei dubbi!
Grazie

Discussione: div grande quanto le dimensioni del browser [era:Div intelligente]

Strumenti discussione

Ricerca discussione

Visualizza

Div intelligente

Permessi di invio