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:
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).
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!
Recent Answers
- Joshua Engel on Why fry rice before boiling?
- haakon.io on Why fry rice before boiling?
- Jon Church on Why fry rice before boiling?
- Peter Machado on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?