Ir para conteúdo

POWERED BY:

Arquivado

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

Mateus Silva

Height 100%

Por , em Desenvolvimento frontend

Recommended Posts

Mateus Silva    64

Mateus Silva
Postado

olá, queria saber se alguém pode me ajudar:

to fazendo um layout onde o div lateral < deve ocupar 100%, fiz, funciona certinho, reajustando a resolução da tela, tudo tudo, ele sempre pega 100%, porém, quando o div de conteúdo >> excedo o tamanho da tela, o menu não acompanha, alguem pode me ajudar ? css:

#top {
	background:#E33553;
	border-bottom:2px solid #AA273F;
	width:100%;
	height:57px;
}
#nav {
	background:none;
	width:240px;
	height:100%;
	float:left;
	position:absolute;
	margin-top:-59px;
}
#content {
	background:#DDD;
	width:auto;
	height:800px;
	margin-left:240px;
}

e o html:

<div id="top"></div>
<div id="nav"></div>
<div id="content">Conteudo</div>

ja achei vários posts, tanto aqui quanto em outros sites (inclui maujor) porém nenhum conseguiu solucionar, alguem poderia me ajudar ?

PS: uma "gambiarra" que eu armei, e funcionou é a seguinte:

$('#nav').height($(document).height());

porém, não queria arrumar isso na base da gambiarra, e outra, caso carregue algo dinamicamente na página e o div de conteudo aumente", o menu acaba nao acompanhando também e outra, quando redimensiona a tela, também não funciona

 

 

 

 

 

Ops, postei na área errada, é costume de postar aqui, hahah, se puderem mover agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

propriedade height não e bom usar % , utilize max-height ou auto.

 

e se você que trabalhar com layout fluído, você deve trabalhar em cima de um contexto!

 

não da pra te ajudar muito, pois você falou de div lateral e postou um codigo o qual não se identifica com o que ta querendo, pois nem uma div ai e filha de outra.

 

crie uma div geral com tamanho de 100% ou menos, isso de acordo com o contexto do seu site, e trabalhe as % das outras dives com base nele, e só use % em width e nunca em height.

 

e procura usar id em div só quando necessário mesmo, use classes.

 

se você não entendeu o que eu quis dizer posso criar um exemplo pra você ok? :yes:

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

explica o que você ta querendo fazer, pois ali não deu pra entender direito!

 

você quer criar um topo e dentro desse topo um menu centralizado com um content e isso ? ou você quer que seu nav acompanhe o height de alguma div ?

 

explica ae.

 

EDIT

 

Ja entendi, executei seu codigo aqui, já ja eu posto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

Mateus vou ver aqui!


olha ae se e isso que você ta querendo.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            html, body {
                height: 100%;
                width: 100%;
            }
            body {
                position: absolute;
            }
            #top {
                background:#E33553;
                border-bottom:2px solid #AA273F;
                width:100%;
                height:57px;
            }
            #nav {
                background:blue;
                width:240px;
                height:100%;
                float:left;
            }
            #content {
                background:#DDD;
                width: 82.32275109170306%;
                height: 100%;
                margin-left: 240px;
                display: table;
            }
 
        </style>
    </head>
    <body>
        <div id="top"></div>
        <div id="nav"></div>
        <div id="content"><h1 align="center">Conteudo</h1>
        </div>   
    </body>
</html>

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