Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde,
Depois de muito fazer sites com larguras fixas e alturas dinâmicas de acordo com o conteúdo, surgiu a necessidade de fazer um sistema com dimensões em porcentagem, respeitando o limite mínimo de 800px por 600px. Entretanto, não consigo fazer a div do conteúdo (COL 2) ficar com a altura de 100% do seu container.
Segue imagem para exemplificar o que desejo e meu código CSS e HTML:
* {
margin: 0;
padding: 0;
border: 0;
} outline:0 none;
}#footer {
position: relative;
margin-top: -3%; /* A mesma altura do rodapé, o valor deve ser negativo */
clear: both;
}
body {
width: 100%;
height: 100%;
min-width: 800px;
min-height: 600px;
padding: 0;
margin: 0;
font-family: Tahoma, arial, sans-serif;
font-size: 0.8em;
color: #000;
line-height: 1.8em;
background: #F7F6F6;
}
#top {
width: 98%;
padding: 1%;
min-height: 10%;
overflow: hidden;
background: #016109;
color: #fff;
}
.top-logo {
width: 50%;
float: left;
}
.top-info {
width: 50%;
float: left;
text-align: right;
}
#wrap {
width: 100%;
min-height: 700px;
display: table;
}
#col-menu {
width: 11%;
display: table-cell;
float: left;
padding: 2%;
}
#col-cont {
width: 81%;
display: table-row;
background: #fff;
float: left;
padding: 2%;
}
#footer {
width: 98%;
padding: 1%;
height: 2%;
background: #373535;
color: #fff;
text-align: center;
}HTML:
<body>
<div id="global">
<div id="top">
<div class="top-logo">
logo
</div>
<div class="top-info">
Terça-feira, 05 de março de 2013
</div>
</div>
<div id="wrap">
<div id="col-menu">
<h3>Página Inicial</h3><br />
<h3>Imóveis</h3><br />
Adicionar um imóvel<br />
Procurar imóveis<br />
Gerenciar imóveis
</div>
<div id="col-cont">
<h1>Página Inicial</h1><br /><br />
Bem-vindo a página inicial! Esse é meu primeiro site recessive!<br /><br />
</div>
</div>
</div>
<div id="footer">
2013 © cIMÓVEIS - Todos os direitos reservados
</div>
</body>IMAGEM PARA EXEMPLO:
/applications/core/interface/imageproxy/imageproxy.php?img=http://img600.imageshack.us/img600/3701/siteexample.jpg&key=dc77e15ae700f32e9d677fec118536aeb57697a3749c59864bdf58dad9d6b003" alt="siteexample.jpg" />
Desde já muito grato!
Carregando comentários...