div box altezza al 100%

[Nemesis19_italy]

Salve a tutti!

C'è una cosa che non sono mai riuscito a capire. Come fare a far estendere al massimo l'altezza di un div box.

Ecco un semplice stile id:

div#contenuto {
width: auto;
height: 100%;
margin: 157px;
text-align: left;
border: 1px solid red;
padding-bottom: auto;
}

con height:100% assolutamente non funziona. sono costretto a mettere una dimensione in altezza fissa in pixel, oppure non mettere niente e vedere adattato verticalmente il box al contenuto.

qualche idea diversa? e se non si può fare, almeno qualcuno conosce la radice del perché di questa mancanza? colpa del w3c?

[Sergio P.]

La domanda a cui devi risponderti è: il 100% di che?

Se l'elemento padre di quel div ha una altezza dichiarata, il tuo DIV si adatterà al 100% di quell'altezza. Altrimenti, non esistendo un valore a cui adattarsi, è normale che non funzioni.

Ciao.

S.

[MacTrin]

aggiungi: position: absolute;

e imposta un width preciso

[Nemesis19_italy]

Sergio P. ho messo un height: 100% anche all'elemento padre che è un div, quindi il div in questione dovrebbe espandersi, invece no. l'elemento padre dell'elemento padre è la pagina quindi non credo di dover impostare altri parametri.

ma non succede nulla! non si allarga in altezza.

MacTrin, grazie ma vorrei evitare avendolo così sempre alla massima estensione.

per carità i float sono una bella invenzione, ma quando si faceva tutto con le tabelle era un'altra stroria, anche se non correttissime per la funzione che veniva usata, erano semplicemente prive di problemi.

grazie ancora

[caruso_g]

Il problema non è del css ma dei browser, se interpretassero per bene le specifiche del css, impostando height 100% si sarebbe dovito estendere per tutta l'altezza.

puoi postare un linke per vedere come è strutturata la pagina?

in generale

* {

margin: 0;

padding: 0;

}

html, body {

height: 100%;

max-height: 100%;

margin: 0;

padding: 0;

}

body>#ilDivCheVuoiEstendere {

height: auto;

min-height: 100%

}

[Nemesis19_italy]

non avevo notato questa ultima risposta.....probabilmente un problema negli avvisi del forum...

cavolo grazie caruso_g, ti posto qui il link:

http://www.slamdunk.it/index.php

sto facendo un template per joomla 1.5 e come vedi le colonne laterali hanno uno sfondo che non arriva al 100% di altezza.

ti posto il mio css:

* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
max-height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: Verdana;
font-size: 76%;
}

body>div#container {
height: auto;
min-height: 100%;
}

/* div layout */
div#content {
width: auto;
height: auto;
margin: 0px 227px;
padding-top: 0px;
}
div#left {
float: left;
width: 217px;
height: auto;
margin: 0 auto;
background-image: url("../images/sfondo_left.gif");
background-repeat: repeat-y;
padding-top: 0px;
text-align: left;
overflow: hidden;
}
div#right {
float: right;
width: 217px;
height: auto;
margin: 0 auto;
background-image: url("../images/sfondo_right.gif");
background-repeat: repeat-y;
padding-top: 0px;
text-align: left;
}

riaprendo questa discussione spero che qualche anima buona mi illumini!

[grigio60]

il punto delle misure in percentuale è quello sollevato da Sergio P.

quando tu indichi "width: 100%" o "height:100%", quel 100% si deve riferire a qualche cosa, perché le misure in percentuale sono "relative" e hanno quindi bisogno di un riferimento assoluto esplicito.

nel caso di height non basta dire "ho messo al 100% anche l'altezza del contenitore padre" né i browser sono in grado di interpretare correttamente cosa si intende con "100%" nel caso di un elemento padre: il 100% di che cosa in questo caso? del body? della finestra visualizzata (ma in questo caso l'altezza cambierebbe se uno ridimensiona la finestra)?

è per questo che l'elemento "height: 100%" risulta molto difficile da gestire - e non è colpa dei browser perché questi non possono essere nella testa di chi ha concepito il sito e ha sparato lì un height: 100% di cui non si riesce a interpretare in modo univoco "il 100% di che cosa".

il primo punto quindi è capire il 100% "di quale altezza" vuoi che venga occupato.

di solito nelle css la regola è che un elemento di dimensioni di tipo relativo (in percentuale) debba avere un contenitore padre o comunque ascendente in cui la dimensione corrispondente è data in modo assoluto (in pixel): solo in questo modo i browser sono in grado di gestire correttamente (e non in modo arbitrario) il ridimensionamento di tipo relativo.

nel caso delle colonne laterali: height: 100% viene interpretato SEMPRE come "100% dei contenuti" quindi non arriveranno mai automaticamente a riempire tutta l'altezza del corpo, speci se i contenuti non sono sufficienti.

In effetti il metodo basato su css per "rendere" colonne verticali tutte della stessa altezza indipendentemente dai contenuti è tutt'altro e NON si basa affatto su height: 100% ma su un approccio completamente differente.

[Nemesis19_italy]

e sapresti indicarmi questo approccio differente?

ho fatto la frubata :oP non si imposta lo sfondo in basa ai float maledetti

se riclicchi sul sito si vede il miracolo :oP

infatti ho creato due id

div#container {
width: auto;
padding: 0;
background-image: url("../images/sfondo_left.gif");
background-repeat: repeat-y;
background-position: left 0px;
}
div#container2 {
width: auto;
padding: 0;
background-image: url("../images/sfondo_right.gif");
background-repeat: repeat-y;
background-position: right 0px;
}

e mettendo i valori su position del background ho il risultato in base alla lunghezza dei contenuti non float. ora spero solo che se i contenuti saranno più corti dei menù di non avere le righe di bordo più corte...per ovviare ho lasciato quello sfondo anche ai float

div#left {
float: left;
width: 217px;
height: auto;
margin: 0 auto;
background-image: url("../images/sfondo_left.gif");
background-repeat: repeat-y;
padding-top: 0px;
text-align: left;
overflow: hidden;
}
div#right {
float: right;
width: 217px;
height: auto;
margin: 0 auto;
background-image: url("../images/sfondo_right.gif");
background-repeat: repeat-y;
padding-top: 0px;
text-align: left;
}

se trovate errori a questa cosa, fatevi avanti )

[alfaconceptstudio]

Intanto dovresti mettere anche html e body al 100% dell'altezza. Poi dovresti togliere i margini e paddign superiori e posteriori se vuoi avere il 100% di altezza e che non ti rimanga neanche uno spaziettino bianco. E per utlimo per avere 2 barre laterali alla stessa altezza dovresti mettere un div che fa da footer in fondo con "clear: both" in modo che il div in questione si posizioni subito sotto la colonna più lunga innalzando la dimensione del div padre e facendo di conseguenza allungare anche le altre colonne impostate al 100%. Il div può anche contenere semplicemente uno spazio html.

PS: non paragonare le tabelle ai css per favore, perchè semplicemente non sono paragonabili: i css a volte sono .... ostici ... ma hanno un potenza infinita se impari i trucchetti del mestiere! Le tabelle inoltre vanno contro ogni specifica W3c di accessibilità e rendono più difficile l'indicizzazione da parte dei motori di ricerca oltre che creare confusione nel codice html!

[Nemesis19_italy]

alfaconceptstudio io ho seguito le tue indicazioni ma non funziona:

ecco il css:

html, body {
margin: 0;
padding: 0;
}
body {
font-family: Verdana;
font-size: 76%;
}

div#container {
width: auto;
padding: 0;
}

/* div layout */
div#content {
width: auto;
height: auto;
margin: 0px 227px;
padding-top: 0px;
}
div#left {
float: left;
width: 217px;
height: auto;
margin: 0 auto;
background-image: url("../images/sfondo_left.gif");
background-repeat: repeat-y;
padding-top: 0px;
text-align: left;
}
div#right {
float: right;
width: 217px;
height: auto;
margin: 0 auto;
background-image: url("../images/sfondo_right.gif");
background-repeat: repeat-y;
padding-top: 0px;
text-align: left;
}
div#footer {
clear: both;
width: auto;
height: 70px;
padding-top: 1px;
margin: 0;
text-align: center;
}

ecco il body php/html:

<body>
<div id="container">
<div id="left">
	<img src="templates/<?php echo $this->template ?>/images/logo.jpg" alt="" title="" border="0" />
	<jdoc:include type="modules" name="left" style="xhtml" />	
</div>
<div id="right">
	<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<div id="content">
	<jdoc:include type="component" />
</div>
<div id="footer">
	<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</div>
</body>

non fate caso hai tag strani, è tutta roba di joomla che non infierisce sul css.

cliccando sul sito che ho riportato sopra vedi il risultato di questi codici che ho messo adesso

[grigio60]

Intanto dovresti mettere anche html e body al 100% dell'altezza.

dell'altezza "di cosa?" non serve a niente questa direttiva

l'approccio per avere una resa di tre colonne assolutamente della stessa altezza, indipendentemente dai contenuti, NON si basa su height che NON può funzionare per il modo stesso in cui l'attributo è specificato nelle css.

l'approccio corretto è questo:

- una div contenitore che ha una grafica di sfondo (ripetuta solo verticalmente) che differenzia le tre colonne

questa div contenitore contiene quattro div

- le tre colonne realizzate con div diversa: una div float:left (colonna di sx), una div float:right (colonna di dx) e la div centrale senza float.

- una div di footer caratterizzata da "clear: both" e di ampiezza (width) pari alla div contenitore

in questo modo si otterranno sempre tre colonne ben distinte, tutte della stessa altezza, indipendentemente dai contenuti delle tre div.

[Nemesis19_italy]

esatto funziona adesso mettendo come hai detto anche se con qualche ritocchino qua e là.....

grazie mille.....

se siete interessati al risultato potete dare una occhiata QUI

se volete sapere codici vari fatemelo sapere...adesso non li riposto per decenza

[iMario]

Io ho avuto un problema simile con semplici tabelle e dreamweaver. Ho risolto rimuovendo le prime righe del codice relative al w3c. Il sito funziona perfettamente su tutti browser, quindi rimane standard.

[Sergio P.]

Io ho avuto un problema simile con semplici tabelle e dreamweaver. Ho risolto rimuovendo le prime righe del codice relative al w3c. Il sito funziona perfettamente su tutti browser, quindi rimane standard.

Ommamma... il fatto che funzioni non vuol dire che sia standard.

Tu hai ignorato una delle regole basi della costruzione delle pagine. Levando il DTD ora i browser non sapranno in che "lingua" tu stai scrivendo il codice e quindi interpreteranno le tue pagine senza nessuna direttiva comune, ma ognuno secondo le proprie regole. Avrai risolto quel problema ...ma te ne ritroverai mille altri.

[grigio60]

quindi rimane standard.

ma nemmeno per sogno: prova ad andare su validator.w3.org, inserire la URL di quella pagina e vedi cosa ti salta fuori come risultato.