TransWikia.com

CSS: Posicionamento header e body

Stack Overflow em Português Asked by André Machoski on October 9, 2020

Fala pessoal, estou mexendo com CSS para um blog pessoal que pretendo criar.

Porém estou com problema para entender alguns aspectos de posicionamento.

Abaixo está uma versão inicial do blog:

<head>
    <meta charset="utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/basico.css"/>
    <link rel="stylesheet" href="../css/artigo.css"/>
    <link rel="stylesheet" href="../fonts/anurati.otf"/>


</head>

<body>

    <header>

        <h1 class="titulo-pagina">Blog</h1>

        <img class="icone-blog" src="../imagens/icons/icone-header.ico" alt="ícone do blog"/>
    </header>

    <main>
      <div class="texto">
        <div class="menu-lateral">
          <ul>
            <li><a class="link" alt="capítulo 1">Capitulo I</a></li>
            <li><a class="link" alt="capítulo 2">Capitulo II</a></li>
            <li><a class="link" alt="capítulo 3">Capitulo III</a></li>
            <li><a class="link" alt="Imagens">Imagens</a></li>
            <li><a class="link" alt="referências">Referencias</a></li>
          <ul>
        </div>


        <div class='artigo'>
          <h1 class="titulo-artigo">Título do texto</h1>
        </div>
      </div>
    </main>

  <script src="../js/menu-lateral.js"></script>

</body>

Código CSS

header{

background-color: #1768AC;
box-sizing: border-box;
width:100%;
height: 70px;
position:fixed;
top:0;
left:0;

display:flex;
align-items:center;
justify-content: space-between;
}

main{

margin-top:70px;

}

Abaixo está uma imagem simples de como está ficando:

Protótipo blog

Eu tentei substituir a altura do header de:

{
height:70px;
}

para

{
height: 10%;
}

e no main, modifiquei o margin-top de 70 px para 10%.

Ao inspecionar a página o body, não está preenchendo toda a página, e está com um espaçamento do header (imagem abaixo).

Problema com o body

Por que isso ocorre? Como posso resolver?

One Answer

Veja, quando você define a altura do header em 70px, ele terá sempre 70px independentemente da altura da janela. Quando você troca por 10%, altura terá 1/10 (um décimo) da altura da janela, ou seja, se a altura da janela variar, a altura do header também, porque é proporcional em 10%.

Como você definiu 70px de margem superior no main, essa margem é fixa. Como o header tem 10% de altura da janela, o main terá sempre 70px de margem do topo da janela, podendo gerar um espaço (ou não) entre o header e o main (o espaço que o main ocupa é contabilizado no body, já o do header não, porque ele é fixed).

Se o header tiver 10% de altura, suponha que você use uma tela com uma altura muito alta, o header irá ficar por cima do main, já que os 10% podem ser maior que os 70px de margem do main. Por exemplo, uma janela com 1000px de altura, o header ficará com 100px (10%) de altura, e como o main está a 70px de margem do topo da janela, o header irá sobrepô-lo.

Em resumo, não use valores em % no height (exceto em casos específicos). Deixe o header com 70px de altura e o main com um pouco mais de 70px, para que o header e o main não fiquem grudados.

Answered by Sam on October 9, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP