Adeguare l'altezza di un div a quella di un altro

**gandall** · 05-02-2012, 17:30

Salve a tutti,
avrei esigenza di realizzare una cosa di questo tipo:

in pratica si tratta di:
- un div "container" che si allarga per tutta la pagina
- un div "centro" esterno al primo div, di dimensioni fisse, che si sovrappone al primo, sia centrato in orizzontale e in alto nella pagina e che al suo interno contenga una tabella di dimensioni fisse, centrata in orizzontale ed in alto al suo interno

Il codice che ho realizzato è il seguente:

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 type="text/css">
<!--
div#container {
	position:absolute;
	width : 100%;
	min-height:100%;
        background-color: #3F9;
        z-index:50;

}
div#centro {
	position: absolute;
	width : 950px;  
	min-height:100%;
    	top:0px;
	left: 50%;
	margin-left: -475px;
	background-color: #FF0;
	text-align:center;
	z-index:80;

	
 }

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.sfondo_table {
	background-color: #F00;
}
-->
</style>

</head>

<body>


<div id="centro">
<table width="300" border="0" cellpadding="0" cellspacing="0" class="sfondo_table" id="main_table">
      <tr>
            <td width="60"></td>
        <td width="181" valign="top">

</p>
        
        


          
        </p></td>
            <td width="59" align="center" valign="top">

</p>
            

</p>
            

</p>
            

</p>
            

</p>
            

</p>
      
            

</p></td>
      </tr>
    </table>
</div>
<div id="container"></div>
</body>
</html>

A parte la tabella che non si centra orizzontalmente dentro il div "centro", tutto il resto sembra funzionare: il div "container" si allarga al 100% ed il div "centro" lo segue in altezza se ridimensiono la finestra del browser. Il problema sorge quando all'interno della tabella c'è del contenuto più lungo della finestra del browser; in tal caso appare la barra di scorrimento laterale e andando giù si scopre che il div "container" non si estende fino alla fine della pagina.
Come si può fare a far si che l'altezza del div "container" segua l'altezza della tabella (o eventualmente l'altezza del div "centro")?

Grazie a tutti in anticipo

**Prill** · 05-02-2012, 18:54

Ciao, perché usare i posizionamenti assoluti? Prova a ridurre la larghezza della finestra a meno di 950 pixel e il contenuto sarà tagliato. Per centrare la tabella basterebbe un align="center" fra i suoi attributi, passandolo via css (come potrebbe esser fatto per tutti gli altri attributi avendo codice pulito) un margin:0 auto

**fmortara** · 05-02-2012, 23:49

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 type="text/css">
html, body {
	width:100%;
	height:100%;
	margin:0px;
}

div#container {
	width: 100%;
	height: 100%;
	overflow:auto;
	background-color: #00f;
}

div#centro {
	width: 950px;  
	min-height:100%;
	margin:0 auto;
	background-color: #ff0;
}

#main_table {
	width:600px;
	margin:0 auto;
	background-color: #F00;
}
</style>

</head>

<body>

<div id="container">

<div id="centro">

	<table id="main_table">
		<tr>
			<td>
				

</p>
				

</p>
				

</p>
				

</p>

				

</p>
			</td>
			<td>
				

</p>
			</td>

		</tr>
	</table>
	
</div>

</div>

</body>
</html>

**gandall** · 05-02-2012, 23:53

ciao
perdonami ma non sono molto pratico con i css; ho messo i posizionamenti assoluti perchè nelle prove che ho fatto sembravano funzionare per il mio scopo; infatti se adesso li cambio in relativi non vedo più il div container.
Come posso risolvere?

ciao e grazie

**fmortara** · 05-02-2012, 23:57

Se il container deve contenere, tu perché lo avevi messo interamente in fondo?
non è più logico usarlo come contenitore?

Guarda il mio codice, dovrebbe funzionare...

**gandall** · 06-02-2012, 00:47

container è un nome a caso

, forse era meglio chiamarlo background

fatto sta che il div "centro" non deve essere al suo interno perchè se io assegno per es un evento onclick al container, verrà eseguito anche se clicco sul div "centro" ( e ciò non dove accadere)

ciao

**fmortara** · 06-02-2012, 11:28

ma no...

**gandall** · 06-02-2012, 12:53

guarda questo:

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 type="text/css">
html, body {
	width:100%;
	height:100%;
	margin:0px;
}

div#container {
	width: 100%;
	height: 100%;
	overflow:auto;
	background-color: #00f;
}

div#centro {
	width: 950px;  
	min-height:100%;
	margin:0 auto;
	background-color: #ff0;
}

#main_table {
	width:600px;
	margin:0 auto;
	background-color: #F00;
}
</style>

<script>

function click1(){
	alert ("hai cliccato")
}

</script>
</head>

<body>

<div id="container" onclick="javascript: click1()">

<div id="centro">

	<table id="main_table">
		<tr>
			<td>
				

 </p>
				

 </p>
				

test </p>
				

 </p>

				

 </p>
			</td>
			<td>
				

test </p>
			</td>

		</tr>
	</table>
	
</div>

</div>

</body>
</html>

ovunque clicchi viene invocato l'evento onclick che c'è sul div "container", mentre io vorrei che sul div centro e sulla tabella non fosse attivo. Il click deve essere attivo solo sullo sfondo diciamo; per questo avevo ipotizzato di sovrapporre i div

**gandall** · 06-02-2012, 23:52

nessuna idea? devo buttarmi su javascript?

Discussione: Adeguare l'altezza di un div a quella di un altro

Strumenti discussione

Ricerca discussione

Visualizza

Adeguare l'altezza di un div a quella di un altro

Re: Adeguare l'altezza di un div a quella di un altro

Permessi di invio