Div che non riempe spazio vuoto in verticale

**sanci** · 14-05-2013, 21:22

Buonasera a tutti, cercherò di essere il più chiaro possibile nell'esporre il mio problema.
Nella mia pagina ho messo un wrapper con dentro un header, una left column, un main e un push per lo sticky footer.
Fuori dal wrapper infine ho messo il footer, tutto come div.

Nel main, che è la parte principale della pagina, la mia intenzione è di mettere la maggior parte dei contenuti, anche perchè replicherò questa struttura in altre pagine.
Purtroppo, testando, mi sono reso conto che con testi di 2-3 righe il div main non arriva fino in fondo alla pagina, ma si limita al suo contenuto.

So che è una delle domande più chieste sul CSS in internet, però ho davvero provato mille versioni differenti. Ho chiesto pure su stackoverflow ma non mi sono stati d'aiuto :/

Vi posto il mio codice html e il css, sperando che almeno voi possiate darmi una mano

Codice html

codice:

</html>
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="../css/stili.css" type="text/css" />
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div id="wrapper">

	<div id="header"> 
        <?php
         include('../php/header.php');
        ?>
    </div>

	<div id="leftcolumn">
	<?php
         include('../php/leftcolumn.php');
    ?>
	</div>
	<div id="main" >
Testo di debug bla bla bla
   </div>
         <div id="push"></div>
</div>
<div id="footer">Copyright 2013</div>


</body>

</html>

CSS (Metto solo quelli che penso siano rilevanti per il problema)

codice:

html,
body {
	padding:0;
	margin:0;
	height:100%;
}

#wrapper {
	min-height: 100%;
    	height:     auto !important;
    	height:     100%;
    margin:     0 auto -30px; /* -44px being the size of the footer */
	width:950px;
	background-color:#E3AA56;
	overflow:hidden;
}

#main {
   	height:100%;
	width:680px;
	padding:10px;
	background:#E0CD90;
	text-align:justify;
	margin:0 auto;
	overflow:hidden;
}

**Nobody33** · 15-05-2013, 18:03

Puoi postare il codice QUI e salvi il tutto.

Grazie

**sanci** · 15-05-2013, 19:42

Ok, nel frattempo ho fatto un po' di modifiche.

In questo fiddle, siccome includo leftcolumn e header in php, non sono visibili.

Ho usato il barbatrucco di fare il wrapper dello stesso colore della leftcolum comunque.
Virtualmente come header ho un'immagine e come leftcolumn una colonna di link, però essendo dinamici non riesco a metterli.
Comunque subito sotto all'header, nel centro inizia il div main, dove c'è il testo di prova. Io vorrei che il div scendesse fino a sopra il footer, riempendo lo spazio vuoto. Ho provato davvero in mille modi, ma non ho ancora trovato una soluzione :/

Spero di essere stato abbastanza chiaro, eventualmente chiedete pure e cercherò di spiegare la situazione il meglio possibile

P.s. L'altezza è dinamica, essendo uno schema che riciclo in più pagine non so mai a priori l'altezza che avranno i div, è per questo che uso le % e che mi serve un accorgimento che non implichi valori prefissati.

**Nobody33** · 15-05-2013, 19:56

Eccoti QUI

EDIT

Nel #wrapper cancella il

codice:

height: auto !important;

e nel #main invece di height: 100%; metti

codice:

min-height:100%;

**sanci** · 15-05-2013, 20:56

Eh ci avevo già provato, però in questo modo se il testo supera la dimensione dello schermo viene coperto dal footer :/
E per di più il footer ora se zoomo rimane sempre nella pagina, anche a 500%

**Nobody33** · 15-05-2013, 21:31

Il footer rimane sempre a fondo pagine perché è fuori dal contenitore principale (#wrapper).
Succedeva anche prima.

Se vuoi risolvere anche con il footer, dovresti cambiare un po di cose nel layout.

**sanci** · 15-05-2013, 21:40

Originariamente inviato da Nobody33
Il footer rimane sempre a fondo pagine perché è fuori dal contenitore principale (#wrapper).
Succedeva anche prima.

Se vuoi risolvere anche con il footer, dovresti cambiare un po di cose nel layout.

Si, prima rimaneva a fondo pagina, non in fondo alla finestra. Ho usato lo sticky footer con il div push interno al wrapper, andare va come aspettato (prima delle modfiche): rimane sempre a fondo pagina (non a fondo schermo).

Eventualmente che cosa dovrei cambiare per avere il footer sempre a fondo pagina e mantenere le ultime modifiche, ovvero che il main si espanda fino alla fine automaticamente ??

**Nobody33** · 16-05-2013, 00:40

Le cose sono due:

1) o rinunci al #main fino in fondo alla pagina, ovvero lasci il tuo codice oppure

2) rinunci a fare lo zoom (

), hai il main a 100% di altezza ma il footer rimane a fondo pagina.

Altro non so dirti

**sanci** · 16-05-2013, 01:05

Vabbè grazie mille lo stesso

Speriamo che qualche buon'anima abbia qualche idea per aiutarmi :/

Discussione: Div che non riempe spazio vuoto in verticale

Strumenti discussione

Ricerca discussione

Visualizza

Div che non riempe spazio vuoto in verticale

Permessi di invio