Problemas com rodapé no final da página

[Daniel web 0]

Olá a todos!

 

Meu problema é o seguinte: meu rodapé fica com espaço sobrando em baixo quando a página tem pouco conteúdo. Queria fazer com que ele sempre topasse em baixo. Pesquisei na net e só achei soluções com postion absolute ou fixed que não resolveram meu problema, pq o rodapé ficava fixo e atrapalhava os outros elementos da página.

 

HTML

<div id="footer">
           	<div id="footer-wrap">
               	<div id="slide">
                   	<ul>
                           <a href="#"><li id="design" class="active">web design</li></a>
                           <a href="#"><li id="marketing">web marketing</li></a>
                           <a href="#"><li id="mobile">web mobile</li></a>
                           <a href="#"><li id="social">web social</li></a>
                       </ul>
                       <div id="design" class="cont">
                       	<img src="<?php bloginfo( 'template_url' ); ?>/images/design.png" />
                       </div>
                       <div id="marketing" class="cont">
                       	<img src="<?php bloginfo( 'template_url' ); ?>/images/marketing.png" />
                       </div>
                       <div id="mobile" class="cont">
                       	<img src="<?php bloginfo( 'template_url' ); ?>/images/mobile.png" />
                       </div>
                       <div id="social" class="cont">
                       	<img src="<?php bloginfo( 'template_url' ); ?>/images/social.png" />
                       </div>
                   </div><!-- slide -->
                   <div id="feedback">
                   	<h1>feedback</h1>
                       <ul id="social">
                       	<a href="#"><li id="twitter">twitter</li></a>
                           <a href="#"><li id="facebook">facebook</li></a>
                           <a href="#"><li id="orkut">orkut</li></a>
                           <a href="#"><li id="flickr">flickr</li></a>                          
                           <a href="#"><li id="linkedin">linkedin</li></a>
                           <a href="#"><li id="rss">rss</li></a>
                       </ul><!-- social -->                   
                       <div style="clear:both"></div>
                       <ul>
                       	<li><input value="Digite aqui seu nome" /></li>
                           <li><input value="Digite aqui seu e-mail" /></li>
                           <li><textarea>Digite aqui a mensagem</textarea><input type="button" class="button" value="enviar" /></li>
                       </ul>                        
                   </div><!-- feedback -->
                   <!-- tabs -->
			<script>
               $(function() {

               $("#slide").tabs("div.cont", {event:'mouseover'});
               });
               </script>
               </div><!-- footer-wrap -->                
		</div><!-- footer -->
           <div id="final">
           	<div id="wrap">
           		<div id="selo" title="Midiaweb.net, inovações para o mundo digital">
                   	midiaweb.net, inovações para o mundo digital
                   </div><!-- selo -->
                   <ul>
                       <li>
                           <div id="search">
                               <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
                                   <input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Busca', 'midiaweb' ); ?>" />
                                   <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'OK', 'midiaweb' ); ?>" />
                               </form>
                           </div><!-- search -->
                   	</li>
                       <li>versão desktop</li>
                   	<li>versão mobile</li>
                   	<li>mapa do site</li>
                       <li>acessibilidade</li>
                       <li>privacidade</li>
                   </ul>
                   <div style="clear:both"></div>
               </div><!-- wrap -->
           </div><!-- final -->

 

CSS

#footer {
width:100%;
height:204px;
clear:both;
}
#footer-wrap {
width:960px;
margin:0 auto;
display:table;
}
#final {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#ddddd8;
border-top:3px solid #dadad5;
color:#9a9a9a;
}
#final #wrap {
width:960px;
margin:0 auto;
height:30px;
padding-top:6px;
}

[Fernando Gyn 0]

Veja se te ajuda .

 

http://maujor.com/tutorial/rodape-embaixo-da-janela.php

[Daniel web 0]

Veja se te ajuda .

 

http://maujor.com/tutorial/rodape-embaixo-da-janela.php

 

Tinha achado já essa solução no Google, mas não consegui implementar. Talvez seja algo errado nas outras divs que tenho. Mesmo assim valeu.

[Fernando Gyn 0]

coloca um link se possível

[Daniel web 0]

coloca um link se possível

 

estou acessendo de servidor local, mas olha uma imagem:

 

[mateusguitar1 0]

o que exatamente atrapalha com position absolute?

quando vai dar um zoom na página?

se for isso, se não me engano, deixando as outras como absolute tbm ele perde o foco do rodape e encontra o próximo...

tenta ai e posta pra gente ver!

[Daniel web 0]

o que exatamente atrapalha com position absolute?

quando vai dar um zoom na página?

se for isso, se não me engano, deixando as outras como absolute tbm ele perde o foco do rodape e encontra o próximo...

tenta ai e posta pra gente ver!

 

Não funcionou. É exatamente isso, quando mudo resolução ou dou um zoom o rodapé fica por cima das outras div.

[Fernando Gyn 0]

bom

 

 

tira o height daqui

 

#footer {
       width:100%;
[b]        height:204px;
[/b]        clear:both;
}

 

na sua imagem tem esse destaque de borda vermelha tenta com firebug ou outro,

identificar qual elemento e esse se não tem height ou padding.

tira o height que cito.

 

ah coloca overflow:hidden no seu footer.

[Daniel web 0]

Tentei tirar o height e colocar o overflow, mas não funcionou. E o elemento em vermelho foi uma borda que coloquei no photshop pra indicar a falha do rodapé, ou seja, só é na imagem mesmo.

 

Valeu

[allex_carvalho 124]

Sendo assim, coloque-o em algum servidor para analisarmos. Com o firebug é bem mais fácil.