Visualizzazione dei risultati da 1 a 9 su 9
  1. #1
    Utente di HTML.it L'avatar di flash20
    Registrato dal
    Dec 2003
    Messaggi
    567

    Div che riempe lo spazio fino a fondo pagina

    Ciao a tutti, sto litigando con i css e non riesco a trovare una soluzione, ho una serie di div con un width 100% e un altezza fissa, alla fine di questi div volevo aggiungerne uno (footer) con un colore di sfondo che vada a riempire lo spazio restante della pagina, ma ho qualche problema.

    1- Se gli do altezza 100%, non essendo l'unico elemento della pagina lo scroll va ben oltre il fondo pagina.
    2- Se non gli do l'altezza o metto height auto, non essendoci nulla all'interno del div non si visualizza nulla, perchè per lui non ha altezza.

    Vorrei fare qualcosa per l'appunto che permetta al footer di riempire la parte restante della pagina in funzione della dimensione del browser e degli elementi all'interno della pagina.

    Grazie

  2. #2
    Utente di HTML.it L'avatar di flash20
    Registrato dal
    Dec 2003
    Messaggi
    567
    Questo è l'esempio semplificato dell'HTML:
    codice:
    <div class="container">
    
    <div class="box2">[img]immagini/disegno_menu1.png[/img]</div>
    
    <div class="box1">[img]immagini/disegno_menu2.png[/img]</div>
    
    <div class="footer"></div>
    
    </div>
    Questo invece il CSS:
    codice:
    html, body{
    		height:100%;
    }
    .box1{
    	width:100%;
    	height: 70px;
    }
    .box2{
    	width:100%;
    	height: 100px;
    }
    .footer {
    	background-image:url(../immagini/sfondo-basso.jpg);
    	background-repeat:x;
    	width:100%;
    	height:100%;
    }
    Vorrei per l'appunto che box1 e box2 occupino 170px di altezza dello schermo e che il footer occupi il restante fino in fondo (l'altezza di box1 e box2 è variabile)

    Grazie

  3. #3
    attualmente il div footer va ad occupare il 100% (+ 170px dei due div sopra)

  4. #4
    Utente di HTML.it L'avatar di flash20
    Registrato dal
    Dec 2003
    Messaggi
    567
    E si infatti, potrei dargli un margin-top: -170px ma se i due div sopra hanno una dimensione diversa mi torna il problema, come faccio a fare una cosa flessibile?

  5. #5
    potrebbe essere tutto in %

    codice:
    .box1{
    	height: 7%;
    }
    .box2{
    	height: 10%;
    }
    .footer {
    	height:83%;
    }

  6. #6
    Utente di HTML.it L'avatar di flash20
    Registrato dal
    Dec 2003
    Messaggi
    567
    Non va bene perchè i box sopra potrebbero avere 1 paragrafo oppure 10 e la loro altezza varierebbe in funzione del contenuto, quindi non possono avere un valore in %, perchè se no l'altezza sarebbe correlata alla grandezza del browser.

  7. #7
    probabilmente devi chiedere aiuto a JS e fare ogni volta un calcolo del genere:

    altezza della finestra - box1 - box 2 = altezza footer

  8. #8
    Originariamente inviato da webdemo
    probabilmente devi chiedere aiuto a JS e fare ogni volta un calcolo del genere:

    altezza della finestra - box1 - box 2 = altezza footer
    Si, confermo. Con un'altezza variabile, l'unica soluzione è javascript. Il tuo è un problema molto comune, speriamo che prima o poi ci sia una soluzione definitiva in puro CSS.

  9. #9
    Utente di HTML.it L'avatar di flash20
    Registrato dal
    Dec 2003
    Messaggi
    567


    Noooo ho provato in ogni modo con i CSS, pensavo di sbagliare io, ma a quanto pare allora no. Che palle. Grazie mille in ogni caso

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.