AnswerBun.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!

Related Questions

Ajuda em um procedure com menor media de notas

0  Asked on December 25, 2020 by noob

   

Método no p:commandButton não é chamado

0  Asked on December 25, 2020 by juliana-marques

       

Dicionário com loop FOR em Python

1  Asked on December 25, 2020 by fernando-barros

 

Jogo de dois dados em Python

1  Asked on December 24, 2020 by marco-raad

 

Variável global usada em várias funções

1  Asked on December 23, 2020 by fora-chape

       

Como mudar status com AJAX?

2  Asked on December 23, 2020 by thalles-honorato

     

Como otimizar esse código?

2  Asked on December 23, 2020 by yoyo

   

Como criar um filtro de pesquisa para tabela html?

1  Asked on December 23, 2020 by guilherme-henrique

   

Erro ao logar no app com os dados moveis

0  Asked on December 23, 2020 by joaopauloft

         

Como eu posso melhorar este loop que tem um foreach dentro de outro?

1  Asked on December 22, 2020 by marcos-vinicius

     

Atualização Nodejs

1  Asked on December 21, 2020 by fbio-leonam

   

Atalho para Console.log() em vs code

2  Asked on December 20, 2020 by fernando-ernesto

   

Como alinhar imagem ao lado de imagem

3  Asked on December 19, 2020 by luan-pedro

   

É recomendável utilizar o tipo JSON nas colunas na tabela abaixo

1  Asked on December 18, 2020 by ismael-silva-limq

     

Valor nulo na soma

2  Asked on December 18, 2020 by thales

         

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP