Ir para conteúdo

POWERED BY:

Arquivado

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

Red FeniX

Layout adaptável

Por , em Desenvolvimento frontend

Recommended Posts

Red FeniX    4

Red FeniX
Postado

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;
}
*:focus {
    outline:0 none;
}
html, body, #global {height: 100%;}
body > #global {height: auto; min-height: 100%;}
#wrap {padding-bottom: 3%;}  /* deve ser a mesma altura do rodapé */
#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:

 

siteexample.jpg

 

Desde já muito grato!

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Red FeniX    4

Red FeniX
Postado

Seguinte cara,

 

A col1 vai ser o menu e a col2 a div que exibe o conteúdo. O bg do wrap (div que engloba as duas) é cinza clarinho e o do col2 será branco, para diferenciar e poder fazer o item do menu selecionado também ter bg branco e integrar-se à div do conteúdo.

 

Não sei se deu para entender a idéia, mas é isso.

 

Abraço e obrigado pelo comentário

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hatsuya    0

Hatsuya
Postado

Mano, eu não entendi muito bem. O container da direita não está tendo a altura que desejas?

 

Bem, o problema pode ser as percentagens. De fato é necessário usa-las? tente definir em vez de min-height ou min-width, as propriedades width e height, o tamanho de pixels que deseja, no caso o máximo.

 

Outro problema pode ser que, 800 x 600, sendo 75 % da altura da pág, não seja equivalente ao 100% do container, e daí ele não exiba por questão de: "Dois corpos, não podem ocupar o mesmo espaço"

 

Desculpas se falei algo errado, estamos aí para tentar ajuda ;). abraço

 

Edit: Como css, até onde eu sei, não da para simplesmente chamar sem nada... pode ser que a falta de conteúdo para ocupar o espaço necessário, mais as questões das percentagens estejam atrapalhando... Da uma analisada e nos diz ai se algo adiantou...

 

 

--Hatsuya

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

sera mais facil simular a altura 100%, as duas colunas sem cor e a div que engloba as colunas aplica uma imagem de 1px de altura se repetindo no eixo y essa imagem simula a cor das colunas entendeu? As medidas todas em px.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Red FeniX    4

Red FeniX
Postado

Boa noite,

 

Como disse no título, não utilizo medidas fixas para esse sistema, são relativas ao tamanho da tela do navegador, sendo que existe uma altura e largura mínimas para o site, que no caso é 800x600px.

 

Para melhor exemplificar o que desejo, fica como modelo o site do Gmail. A minha col1 seria aquela coluna do lado esquerdo, onde tem 'caixa de entrada', 'rascunhos', etc. A col2 seria a área onde é exibido os emails e afins.

 

Percebam que ambas as colunas do Gmail assumem uma altura de 100% do container onde estão inseridas, mesmo que não haja conteúdo suficiente para tal. O que quero é deixar o meu do mesmo estilo.

 

Ainda para exemplificar melhor, acessem a página que mostra seu perfil aqui no fórum. Vejam que no lado esquerdo existe um menu com determinadas opções ('visão geral', 'reputação', etc.). Ao selecionar determinada opção, o bg da mesma se torna branco, integrando-a à div que mostra o conteúdo, dando a idéia de menu ativo. É por essa razão que o bg da coluna do meu menu deve ser diferente da que exibe o conteúdo.

 

Obrigado pelos comentários e tentativas de ajudar amigos!

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hatsuya    0

Hatsuya
Postado

@Red FeniX estou a pesquisar, mas sabe me dizer se existem caracteres curingas em css para preencher todo o espaço que restar? Estava pensando em usar padding-bottom, com tal caracter se existir.

 

Daí, ele vai preencher o resto da página em que não tiver nada, e formar seu container. Mesmo com a percentagem. Aguardo respostas, vou tentar a ideia aqui, se ja tiver tal conhecimento, e se existir tal possibilidade, creio que funcionará.

 

Edit: No caso, preencher o espaço , dentro do espaço. uma div dentro da div para ele não pular pra fora.

 

Boa noite,

 

Como disse no título, não utilizo medidas fixas para esse sistema, são relativas ao tamanho da tela do navegador, sendo que existe uma altura e largura mínimas para o site, que no caso é 800x600px.

 

Para melhor exemplificar o que desejo, fica como modelo o site do Gmail. A minha col1 seria aquela coluna do lado esquerdo, onde tem 'caixa de entrada', 'rascunhos', etc. A col2 seria a área onde é exibido os emails e afins.

 

Percebam que ambas as colunas do Gmail assumem uma altura de 100% do container onde estão inseridas, mesmo que não haja conteúdo suficiente para tal. O que quero é deixar o meu do mesmo estilo.

 

Ainda para exemplificar melhor, acessem a página que mostra seu perfil aqui no fórum. Vejam que no lado esquerdo existe um menu com determinadas opções ('visão geral', 'reputação', etc.). Ao selecionar determinada opção, o bg da mesma se torna branco, integrando-a à div que mostra o conteúdo, dando a idéia de menu ativo. É por essa razão que o bg da coluna do meu menu deve ser diferente da que exibe o conteúdo.

 

Obrigado pelos comentários e tentativas de ajudar amigos!

 

Abraço

 

Então mano, desculpa o double post mas não pude editar.... acho que editei demais, mas, a solução sua:

#col-cont {    width: 81%;    display: table-row;     background: #fff;    float: left;    padding: 2%;    padding-bottom: 41%}

Usando porcentagem, e mantendo uma certa proporção. Melhor que pude!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Red FeniX    4

Red FeniX
Postado

Bom dia,

 

Muito obrigado amigo, assim já está bom!

 

Abraços e problema resolvido

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hatsuya    0

Hatsuya
Postado

#Wrap: troque min-height por height: 700px

 

e no espaço use height: 100%

 

 #wrap {
    width: 100%;
    height: 700px;
    display: table;    
 }

 

 #col-cont {
    width: 81%;
    height:100%;
    display: table-row; 
    background: #fff;
    float: left;
    padding: 2%;
 }

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