Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rodrigo7777

Rodapé com largura 100% independente da resolução

Por , em Desenvolvimento frontend

Recommended Posts

Rodrigo7777    0

Rodrigo7777
Postado

Olá pessoa, eu aprendi a pouco tempo como deixar o rodapé sempre no rodapé, independente do se for muito ou pouco conteudo, graças ao site que vocês me indicaram:

 

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

 

Está tudo correto, gostaria de saber como eu faço para deixar a div do rodapé sempre com a largura 100%, pois quando eu boto o rodapé para ficar 100% de largura, ele só vai até onde a DIV "TUDO" vai...Eu já conseguir fazer algo parecido com o topo, deixando uma barra fora da div TUDO, sempre no topo com largura 100% e com uma imagem de fundo, funciono perfeitamente:

 

#topobarra {
	position:absolute;
	width:100%;
	height:293px;
	top: 1px;
	left: -1px;
	background-image: url(barratopo.png);
}

Mas quando eu tento fazer o mesmo procedimento para o rodapé, criando uma DIV fora da DIV "TUDO" e deixando bottom:0; e posição absoluta e com um background, ela até chega a ficar no final da pagina ocupando 100% de largura, mas caso tenha barra de rolagem, ela simplesmente fica parada no lugar, subindo a medida que a barra de rolagem vai descendo...

 

Meu código está praticamente identico ao do site que indiquei no começo, pois eu segui o tutorial a risca e não fui muito alem quando dei as cara com esse problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, para o efeito de topo em 100%, te indico aplicar o background que seria do topo, na tag <body>

assim você ganha o repeat automaticamente, e deixa o topo centralizado apartir do #tudo.

 

Agora para o rodape 100%, a unica modificação que você precisa fazer, além de deixar ele fora da #tudo, é criar uma div #new_body, para ter a rolagem, tirando a rolagem do body. Assim você não terá o problema do rodape ficar parado la, pois ele vai se posicionar apartir da #new_body, e não do body.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo7777    0

Rodrigo7777
Postado

Agradeço sua ajuda, segui o conselho de por background no topo e realmente funciono.

 

A respeito do rodapé, eu não consegui compreender o que é para fazer, pois sou muito leigo.

 

Então, eu criei uma div #new_body fora da div #tudo, coloquei ela em width 100%, height : 30, um background vermelho pra teste, mas não consegui seguir os procedimentos.

 

agradeço a resposta.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado 

<div id="container">
    <div id="header">
        [...]
    </div>
    <div id="content">
        [...]
    </div><!-- /header -->
</div><!-- /container -->
<div id="footer">
    [...] <!-- conteúdo do rodapé -->
</div>
Na verdade eu não faria assim. E deixaria tudo na div#container, mas não declararia o width. A depender do layout, isso pode ser um pouco trabalhoso.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito