CSS - Conteúdo passa por debaixo do Rodapé

jessicald · 28 de agosto de 2013

A função:


function vAjusta() {
        var hbase
        if (navigator.appName == "Microsoft Internet Explorer") {
            document.getElementById("Base").style.height = screen.height - 140 + 'px';
            varhbase = document.getElementById("Base").style.height.substring(0, document.getElementById("Base").style.height.length - 2)
            document.getElementById("Conteudo").style.height =  varhbase- 127 - 310 -170 + 'px';
        }
    }

1º Declarei uma variavel auxiliar

2º Verifiquei o navegador

3º Setei a altura da div base com relação a resolução da tela - aproximadamente a altura do rodape. Se colocar a altura exata não da certo.

4º Setei a altura da div conteúdo com relação a altura da div base menos a soma das alturas do bane, conteúdo e padding.

Agora ATENÇÃO, como disse isso é uma GAMBIARRA! Então não é a melhor das soluções, mas é a única que eu vejo no momento.

Quando você abrir em qualquer navegador com exceção do ie ele vai usar o css que instituímos no inicio e de qualquer maneira funcionará.

Agora no ie colocamos uma altura fixa na div conteúdo, então se por exemplo a pessoa der ctrl - o rodapé estará grudado ao conteúdo, mas não mais no fim da tela. O que não é um grande problema, muitos sites são assim e quase ninguém faz isso (ctrl -).

Coloque a função no onload do body.

eric123 · 28 de agosto de 2013

Jessica, inseri aqui, nao deu, tentei ver se fiz algo errado, mas acredito que nao.

Confere pra mim pra ver se o codigo da certinho. Se nao tem nenhum erro de sintaxe. Talvez também nao esteja reconhecendo o navegador, por isso nao executa o script

jessicald · 28 de agosto de 2013

colocar um alert(navigator.appName) pra ver o navegador

eric123 · 28 de agosto de 2013

Olha Jessica, fiz desta forma:

<script type="text/javascript">
alert(navigator.appName);

function vAjusta(){
  if (navigator.appName == "Microsoft Internet Explorer") {
    alert(navigator.appName);
    var hbase;
    document.getElementById("Base").style.height = screen.height - 100 + 'px';
    var hbase = document.getElementById("Base").style.height.substring(0, document.getElementById("Base").style.height.length - 2);
    document.getElementById("Conteudo").style.height =  var hbase - 127 - 310 -170 + 'px';
    }
}
vAjusta(); //chama a função
</script>

Pra ele dar alert antes de entrar na condição "if", e um depois do if, caso a condição seja true. Quando rodo a pagina nao acontece nada, nem mesmo o primeiro alert é executado. Mas se eu tirar o trecho que modifica o estilo, conforme abaixo, ele executa o primeiro e o segundo alert q está dentro do if, considerando true;

<script type="text/javascript">
alert(navigator.appName);

function vAjusta(){
   if (navigator.appName == "Microsoft Internet Explorer") {
      alert(navigator.appName);
      var hbase;
   }
}
vAjusta(); //chama a função
</script>

O que será que pode ser? Da impressão de nao ser válido, por isso não executa nada que está no script

----- EDIT -----

Achei o erro para que funcione os alert's corretamente, até mesmo o da condição if. Na ultima linha do "if", está "var hbase", acredito que seria somente "hbase", ja que iriamos estar usando somente a variavel para operar.

porém, mesmo assim nao acontece nada no navegador.

jessicald · 28 de agosto de 2013

Eu colocaria a chamada da função assim:

Pessoalmente prefiro assim.

Você está com o depurador de js ativo? Vê se da algum erro pra você porque pra mim não deu.

Outra coisa. Vi que mandei um erro pra você, está sendo declarada 2x a variável hbase. Só declare no inicio da função e depois é só setar o valor, ou seja não tem que ter var na frente.

var hbase
hbase=x+1

Esse código é só pra ilustrar não pra copiar porque não tem nada a ver, tá?

eric123 · 28 de agosto de 2013

Sim, eu entendi. Fiz e deu certo.

Mas nao é um "ufa" ainda, rsrsrs

Testei um conteúdo aqui, e para a nossa infelicidade, o conteúdo invadiu novamente o rodapé. kkkk

Teremos que redefinir mais estilos para o IE no script?

Mog.Lucas · 28 de agosto de 2013

Nossa, que gambiarra você estão fazendo pra fazer algo tão simples?

O min-height deve ser numérico e não em % nesse caso.. acho que me perdi qual foi o ultimo problema envolvendo CSS.. não é preciso (nem recomendado) javascript pra isso..

PS: Para resolver isso de "invadir" o rodapé, acho que você pode aplicar o css

overflow: both;

jessicald · 28 de agosto de 2013

mas mog lucas, caso seja utilizada outra resolução se não a que ele estipulou no inicio a altura do conteúdo não ficará prejudicada?

eric123 · 28 de agosto de 2013

Nao nao, a questão nao é exatamente isso. Estamos usando JS, para que particularmente possamos definir um estilo quando o usuário abrir o site no IE. Pois nao vimos outro jeito para que, da forma que fizemos, aja efeito tanto no FF, chrome e safari quanto no IE.

Mog.Lucas · 28 de agosto de 2013

mas mog lucas, caso seja utilizada outra resolução se não a que ele estipulou no inicio a altura do conteúdo não ficará prejudicada?

Ah, nesse caso sim. Entendi que queriam desenvolver a partir de uma resolução minima, ai ficaria algo como min-height: 1018px por ex.

Nao nao, a questão nao é exatamente isso. Estamos usando JS, para que particularmente possamos definir um estilo quando o usuário abrir o site no IE. Pois nao vimos outro jeito para que, da forma que fizemos, aja efeito tanto no FF, chrome e safari quanto no IE.

O IE não é tão ruim assim, o problema é utilizar os css's corretos.

<html>
	<header>
		<title>Teste</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				text-align: center;
			}
			#cabecalho {
				width: 100%;
				height: 40px;
				background-color: #ff0;
			}
			#corpo {
				width: 100%;
				height: 100%;
				background-color: #999900;
				overflow: vertical;
			}
			#rodape {
				width: 100%;
				height: 20px;
				background-color: #DDDD00;
			}
		</style>
	</header>
	<body>
		<div id="cabecalho">
			Teste
		</div>
		<div id="corpo">
			Teste<br /><br /><br ><br />
			<!-- copiar a linha acima quantas vezes quiser -->
		</div>
		<div id="rodape">
			Teste
		</div>
	</body>
</html>

Esse teste de mostarda funciona perfeitamente independente do browser..

Mas não sou muito a favor de usar height: 100% pois isso depende também do tamanho em que o browser está e não da resolução do usuário. Ainda assim recomendo colocar um min-height de pelo menos 860px. Também, se o rodapé precisa obrigatoriamente ser no final do conteúdo ele não deveria ser uma div filha ?

Abraços!

eric123 · 28 de agosto de 2013

Bom pessoal, acabei resolvendo o meu problema, nao EXATAMENTE da forma que eu queria, mas do jeito que ficou também é útil.

segue estyle:

body{background-image:url(imagens/back_geral.jpg); margin:0px; text-align:center; font-family:Arial, Helvetica, sans-serif; width:100%; display:block; height:100%}
#Base{ background-image:url(imagens/back_base.png);background-repeat: repeat-y; background-position:center; text-align:center; position:relative; min-height:100%; display:block; overflow: vertical; top:127px; margin:o auto}
topo{background-image:url(imagens/back_topo.jpg); height:127px; width:100%; margin: 0 auto; position:fixed;  z-index: 5}

Banner{width:979px; height:302px; margin:0 auto; background: url(imagens/back_banner.jpg) no-repeat 0 0; padding-top:10px; padding-bottom:-100px; position: relative}
Conteudo{width:980px; margin:0 auto; padding-bottom: 20px; background: none repeat-y 0 0; margin-top:-15px; padding-bottom:170px; clear:both; min-height:350px} 

odape_pai{width:100%; height:158px; background-image:url(imagens/back_rodape1.jpg); position: fixed; bottom:0px}

O que que acontece, agora o meu rodapé está fixo no canto inferior, de forma que mesmo que role a barra-de-rolagem ele se manterá lá. E aproveitei pra incrementar que, o topo do site, onde fica o menu e logo, ficara também fixo no canto superior e funcionara da mesma forma do rodape. Sendo assim ao rolar a barra-de-rolagem somente o contéudo e o banner vão ir mudando de acordo com a rolagem, e o topo e o rodape serão pontos fixo do meu layout, entenda com auxilio da montagem abaixo.

Mog.Lucas · 28 de agosto de 2013

Eu ia sugerir colocar como fixed mas imaginei que não fosse o que queria.

Experimente "limpar" os css.. tirar quase tudo e fazer algo mais simples como meu código acima..

Posso considerar seu tópico resolvido ?

eric123 · 28 de agosto de 2013

Lucas, eu ja havia tentado fazer desta forma, mas o q acontece é q ele desce todo até la em baixo, cria barra de rolagens para descer mesmo quando o conteudo está vazio. E acaba sendo nao o que eu queria.

Sim, resolvido, obrigado!

Mog.Lucas · 28 de agosto de 2013

Caso o autor do tópico necessite, o mesmo será reaberto, para isso deverá entrar em contato com a moderação solicitando o desbloqueio.

Mog.Lucas · 9 de setembro de 2013

Prezados,

Talvez meu script até funcione, talvez dependa do browser. Mas há algo que eu esqueci de deixar claro e que acredito ser importante para o conteúdo do tópico:

Em diversas circunstâncias, como essa, os browsers tem dificuldade em definir o tamanho de uma div ANTES de saber o seu conteúdo. Nesse caso especifico, que trata do height: 100%, gostaria de deixar o seguinte link para estudo:

http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm

Abraços!