3
respostas

Dúvida sobre altura do elemento

Boa noite. Tentando fazer alguns exercícios que eu mesmo inventei (tipo criar algum layout) para tentar aprender e praticar mais, percebi uma coisa. No curso 02 de html e css na aula 03, o professor aborda posicionamento. Na aula posicionamos a tag nav dentro de uma div que tem dentro dela um h1 com uma imagem, definimos a posição da div como relative e a posição tag nav em si, como absoluta. Durante a aula, quando definimos a div como relative e a tag como absolut, a altura(height) da div se adapta a uma imagem que tem em um h1, que seria o logo no contexto do exercício.

Minha dúvida foi quando tentei recriar sozinho a mesma div e tag, quando defino a div como relative e a tag como absolute a altura da minha div fica zero (sem altura). Vou por o código para exemplificar.. a dúvida então é, como as alturas dos elementos se comportam? Não sei se expliquei muito bem mas fica ai..

Eu até consegui "arrumar", definindo a altura manualmente no seletor da classe caixa igual eu fiz com a largura.. só fiquei na dúvida mesmo.

    <body>

        <header>
            <div class="caixa">

                <nav>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </nav>

            </div>

        </header>
    </body>

css - 

.caixa {
    position: relative;
    width: 940px;
    background: red;
    margin: 0 auto;
}

nav {
    position: absolute;

}
3 respostas

Boa tarde!

A altura deve ser definida com o parametro height no seu css.

Bons estudos!

Boa noite, Thiago. Como eu escrevi no meu comentário, eu já tinha conseguido solucionar o problema definindo a altura com o parametro height direto no css. Minha dúvida foi mais para saber como é o comportamento.. se eu criar uma tag sem conteudo, ela nao vai ter valor de height?

Bom dia!

Ao criar uma div sem conteúdo, tanto altura quanto a largura sempre serão zero. Ela vai se adaptando conforme o conteúdo que você coloca, ou então, de acordo com a parametrização que você defina - altura e largura.

O posicionamento também funciona do mesmo jeito, através do position. O alinhamento e posicionamento de mais de uma div, alinhados, ou então sempre fixos.

É um exercício legal de praticar.

Bons estudos!