Div che non riempe spazio vuoto in verticale

**clandelnord** · 16-05-2013, 14.35.18

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:

</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;
}

**karl94** · 16-05-2013, 20.07.28

Di quel div#push non te ne fai niente, usa un posizionamento relativo per il body e imposta sempre su questo la proprietà min-height a 100%, il piè di pagina dovrà avere altezza fissa: definiscila e per farlo stare attaccato sul fondo usa il posizionamento assoluto e imposta le proprietà left, right e bottom su zero. Infine per evitare che il testo della pagina vada a finire dietro questo, imposta un padding inferiore per il div#wrapper appropriato.

**clandelnord** · 16-05-2013, 20.56.31

Originalmente inviato da karl94

Di quel div#push non te ne fai niente, usa un posizionamento relativo per il body e imposta sempre su questo la proprietà min-height a 100%, il piè di pagina dovrà avere altezza fissa: definiscila e per farlo stare attaccato sul fondo usa il posizionamento assoluto e imposta le proprietà left, right e bottom su zero. Infine per evitare che il testo della pagina vada a finire dietro questo, imposta un padding inferiore per il div#wrapper appropriato.

Prima di tutto grazie per avermi risposto.
Ora, passando al CSS, facendo così il footer mi rimane si in fondo allo schermo, ma se faccio uno scroll giù mi rimane in mezzo alla pagina. Io avevo messo il push per avere il footer sempre in fondo alla pagina (non schermo) in modo dinamico.

Al momento ho, dopo le modifiche che mi hai consigliato:

Codice:

html,
body {
	padding:0;
	margin:0;

	min-height:100%;
}
#wrapper {
	min-height: 100%;
        height:     auto;
        margin:     0 auto -30px;
	width:950px;
	background-color:#E3AA56;
	overflow:hidden;
	padding:-30px;
}
#main {
   	min-height:100%;
   	height:auto;
	width:680px;
	padding:10px;
	background:#E0CD90;
	text-align:justify;
	margin:0 auto;
	overflow:hidden;
}
#footer{
       border-top: 2px solid #CCCCCC;
	width:950px;
	min-width:auto;
	margin:0 auto;
	height:30px;
	background:#ee5;
	bottom:0;
	position:absolute;
	left:0;
	right:0;
}

**karl94** · 16-05-2013, 20.58.09

Hai dimenticato il posizionamento relativo per l'elemento body.

**clandelnord** · 16-05-2013, 21.01.10

Nada, continua a non andare, non avevo copiato qua la modifica ma avevo provato nel mio. Sono sempre più disperato :'(

**karl94** · 16-05-2013, 21.02.13

Puoi indicare l'indirizzo della pagina in questione?

**clandelnord** · 16-05-2013, 21.18.35

Certo! http://clandelnord.altervista.org/SAW/html/

**karl94** · 16-05-2013, 21.48.11

l tuo problema è la proprietà che definisci alla sesta riga del tuo foglio di stile.

**clandelnord** · 16-05-2013, 21.53.37

C'era height:100% del body.
Ora però, se guardi per esempio la pagina: crea un'inserzione vedi che il footer non sta più in fondo alla pagina. In sto cavolo di sito aggiusti una cosa e va subito a farsi benedire un'altra cosa!

**karl94** · 16-05-2013, 22.17.32

Un'inserzione?

**clandelnord** · 16-05-2013, 22.23.11

Originalmente inviato da karl94

Un'inserzione?

Intendevo: clicca sul link nella colonna a sinistra chiamato "crea un'inserzione" :)

La pagina dove arrivi, cioè http://clandelnord.altervista.org/SA...inserzioni.php ha il footer non a fondo pagina.

**karl94** · 16-05-2013, 22.25.49

Ah, sì, scusa. Mi sono dimenticato di specificare che l'elemento html deve avere altezza 100%. C'è però anche la barra di AlterVista che interferisce, se non ti è proprio necessaria è più semplice toglierla, altrimenti bisognerà ritoccare un poco le misure per far quadrare il tutto.

**clandelnord** · 16-05-2013, 22.32.45

Eh, ora il footer si è abbassato, ma rimane comunque lo spazio vuoto fra lo wrapper e il footer. Vedi che è un circolo vizioso? :)

Hai qualche idea su come rimediare? Sei la mia ulima speranza :'(

**karl94** · 18-05-2013, 18.01.28

Ci sono differenti alternative per porre rimedio a questo problema. Io ti consiglerei il metodo conosciuto come faux columns, che consiste semplicemente nello specificare uno sfondo su altri elementi, distinti dalle colonne. Solitamente per i layout fissi come il tuo è sufficiente applicare al contenitore che si espande per tutta l'altezza (nel tuo caso è l'elemento body) un'immagine di sfondo che si ripete per tutta la lunghezza della pagina. Altre varianti usano pseudo elementi (altre veri elementi) posizionati in modo assoluto in modo da ricoprire tutta la colonna e viene definito su di questi il colore di sfondo.

**clandelnord** · 18-05-2013, 20.10.59

Humm quindi se mettessi la width del body e mettessi il bgcolor come il main dovrebbe funzionare in teoria giusto?

Perchè in parte sto metodo lo uso già con la left column, che non riuscivo a farla arrivare in fondo e allora ho messo il wrapper dello stesso colore.

Oppure, visto che dovrei metteremi a cambiare tutto il contenuto del body, se provassi a mettere un altro wrapper attorno al wrapper?

Comunque ancora grazie per tutto il supporto che mi stai dando :)

Discussione: Div che non riempe spazio vuoto in verticale

LinkBack

Strumenti discussione

Display

Div che non riempe spazio vuoto in verticale

Regole di scrittura