Visualizzazione dei risultati da 1 a 3 su 3

Discussione: [CSS] Footer

  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2003
    Messaggi
    698

    [CSS] Footer

    Devo mettere un footer a piè di pagina e sto realizzando il layout con i css.
    Il problema da risolvere è che questo footer deve stare a fondo pagina se i contenuti entrano nell'altezza del video, invece si deve spostare più in basso qualora i contenuti richiedessero uno scroll verticale.

    In questo articolo http://www.html.it/layout_css/layout_css_15.htm
    si realizza questo effetto sfruttando le regole position:absolute e position:relative su alcuni container.

    Io invece ho fatto così:


    codice:
    html,body{margin: 0;padding:0;height:100%;}
    
    #main
    {
    	width:100%;
    	height:100%;
    		
    	
    	text-align:left;
    }
    
    #content
    {
    	padding: 0 1.5em 5em;
    }
    
    #header
    {
    	height:30px;
    	background-color:#999999;
    }
    
    #footer
    {
    	
    	background-color:#999999;
    	bottom:0;
    	width:100%;
    	height:30px;
    }

    Questo è il codice html
    codice:
    <body>
    
    	<div id="main">
    		<div id="header"></div>
    		
     		 <div id="content"></div>
    		
    		<div id="footer"></div>
    	</div>
    
    </body>
    testato con ie6 e firefox 1.5 funziona correttamente anche quando il testo eccede l'altezza del video.

    Dato che mi pare un procedimento molto più semplice e snello rispetto a quello presentato nell'articolo, mi è venuto il dubbio che ci possa essere qualche controindicazione o che possa aver trascurato qualche aspetto.

    Che ne dite?

  2. #2
    Utente di HTML.it L'avatar di cyberman
    Registrato dal
    Mar 2002
    Messaggi
    7,543
    spostato su css

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2003
    Messaggi
    698
    argh scusa
    mi sono accorto dopo che c'era un forum apposta -.-

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 © 2025 vBulletin Solutions, Inc. All rights reserved.