Ir para conteúdo

POWERED BY:

Arquivado

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

Luizinhou

[Resolvido] Dificuldade CSS height

Por , em Desenvolvimento frontend

Recommended Posts

Luizinhou    0

Luizinhou
Postado

Estou tentando montar um layout com 3 colunas. Tive inúmeros problemas até agora, e consegui resolvê-los aos poucos, mas estou com um agora que não estou conseguindo resolver. Meu site consiste em: header+navmenu, 3 colunas, footer..

 

quando tem bastante conteúdo a página fica exatamente do jeito que eu planejei, mas quando a página está sem conteúdos, as 3 colunas não ocupam o espaço que eu desejo

 

html

<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="css/estilo.css" type="text/css" media="screen">
<script src="./js/height.js" type="text/javascript"></script>
<!--[if  IE]>
<style type="text/css">
	#total {
       height:100%;
       }
	#fundo {
       height:100%;
       }
</style>
<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body>
<div id="fundo">
   <center>
   <div id="total">
       <center>
       <div id="content">

           <div id="header">header</div>

           <div id="navmenu">navmenu</div>

           <div id="navside">
           navside navside navside navside</div>
           <div id="main">main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main</div>

           <div id="aside">
           <a href="index2.html">bastante conteudo</a><br>
           <a href="index.html">pouco conteudo</a>
           </div>

           <div class="clear"></div>

       </div>

       <div id="footer"><p>footer</p></div>
       </center>
   </div>
   </center>
   <div id="bottom"></div>
</div>
</body>
</html>

 

css

html, body {
   height: 100%;
}
body {
   color: #666666;
   margin: 0;
   padding: 0;
   text-align: center;
}
#fundo {
   margin:0 auto;
   min-height:100%;
   text-align:left;
   position:relative;
   width:100%;
z-index:0;
}

#total {
   margin:0 auto;
   text-align:left;
min-height:100%;
   width:960px;
background:#c08c52;
z-index:0;
}
* html #total {
   height: 100%;
}
#content {
   padding-top:10px;
color:#FFF;
padding-bottom:90px;
}
#header {
background:#006;
height:150px;
   text-align: center;
   width:940px;
color:#FFF;
}
#navmenu {
width:940px;
height:60px;
background:#552f04;
text-align:center;
color:#FFF;
margin-bottom:10px;
}
#navside {
display:inline; /*Bug da margem dupla para floats no IE*/
float:left;
width:160px;
background:#905414;
color:#FFF;
margin:10px;
margin-bottom:30px;
}
#main {
float:left;
width:580px;
text-align:center;
margin:10px;
background:#3FF;
}
#aside {
float:left;
width:160px;
background:#905414;
color:#FFF;
margin:10px;
}
#footer {
   bottom:0;
left:50%;
margin:0 auto;
   height:80px;
   position:absolute;
   text-align:center;
   width:940px;
background-color:#000;
margin-left:10px;
color:#FFF;
margin-bottom:10px;
z-index:1;
margin-left:-470px;
}
#bottom {
   bottom:0;
left:0;
margin:0 auto;
   height:100px;
   position:absolute;
   text-align:center;
   width:100%;
background-color:#6F0;
}
.clear {
   clear: both;
}

 

js

function $() {
var elements = new Array();
for (var i=0;i<arguments.length;i++) {
var element = arguments[i];
if (typeof element == 'string') element = document.getElementById(element);
if (arguments.length == 1) return element;
elements.push(element);
}
return elements;
}
var BoxHeights = {
maxh: 0,
boxes: Array(),
num: 0,
op_test: false,
equalise: function() {
this.num = arguments.length;
for (var i=0;i<this.num;i++) if (!$(arguments[i])) return;
this.boxes = arguments;
this.maxheight();
for (var i=0;i<this.num;i++) $(arguments[i]).style.height = this.maxh+"px";
},
maxheight: function() {
var heights = new Array();
for (var i=0;i<this.num;i++) {
if (navigator.userAgent.toLowerCase().indexOf('opera') == -1) {
heights.push($(this.boxes[i]).scrollHeight);
} else {
heights.push($(this.boxes[i]).offsetHeight);
}
}
heights.sort(this.sortNumeric);
this.maxh = heights[this.num-1];
},
sortNumeric: function(f,s) {
return f-s;
}
}
window.onload = function() {
BoxHeights.equalise('navside','main','aside');
}

 

Configurei o js para ele obrigar as 3 colunas ficarem com o mesmo tamanho, então quando 1 tem muito conteúdo, as outras 2 obrigatoriamente ficam grandes também. Gostaria de saber se tem algum jeito CSS,JS para fazer com que as 3 colunas ficassem grandes, mesmo sem conteúdo, com a mesma distancia do bottom/footer em que ela fica quando tem conteúdo (20px)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

pesquise por faux columns

 

não é necessário js nisso.

http://wbruno.com.br/blog/2011/03/12/faux-columns-sem-imagens/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luizinhou    0

Luizinhou
Postado

obrigado pela dica, mas não consigo arranjar um jeito de fazer as colunas ocuparem todo o espaço que deveriam :(

um jeito que eu imaginei seria de colocar um tamanho de 100% - o tamanho fixo do header,navmenu,footer para que ele sempre ocupe o espaço, mas procurei em vários sites como fazer isso e não consegui <_<

detalhe: estou montando um layout compatível com IE8, IE9, Chrome e Firefox, então qualquer solução que eu achei que ficasse certo em apenas um desses eu descartei

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

para 100% de altura, você deve aplicar este tutorial:

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

 

 

pode aplicar as 2 tecnicas em conjunto. 100% altura + colunas de alturas iguais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luizinhou    0

Luizinhou
Postado

então william, esse site foi o que eu tirei como exemplo para começar meu novo layout, o div conteúdo não ocupa 100%, a técnica usada (que funciona) foi fixar o rodapé na base e usar uma imagem de fundo repetindo em Y para cobrir o restante do site. Mas acho que vou deixar assim mesmo, usar uma imagem como fundo :lol:

 

obrigado pelo css das colunas ^_^

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