CSS: header and body positioning

Question

CSS: header and body positioning

Personal talk, I'm messing with CSS for a personal blog I intend to create.

But I'm having trouble understanding some aspects of positioning.

Below is an early version of the 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>

CSS code

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;

}

Below is a simple picture of how it's doing:

I tried replacing the header height of:

{
height:70px;
}

For

{
height: 10%;
}

And no main, I modified the margin-top from 70 px to 10%.

When inspecting the body page, it is not filling the entire page, and is with a header spacing (image below).

Why does this occur? How can I solve?

2

html css body layout header

Author: André Machoski, 2019-07-02

Source

1 answers

score 1 · Answer 1

See, when you set the header height to 70px, it will always have 70px regardless of the window height. When you swap for 10%, height will have 1/10 (one tenth) of the window height, that is, if the window height varies, the header height too, because it is proportional by 10%.

As you defined top margin 70px in main, this margin is fixed. Since the header is 10% window height, the main will always have 70px margin of the top of the window, and can generate a space (or not) between the header and main (the space that main occupies is counted in the body, and the header does not, because it is fixed).

If the header is 10% high, suppose you use a screen with a very high height, the header will be on top of the main, since the 10% can be greater than the 70px margin of the main. For example, a window with 1000px height, the header will be 100px (10%) high, and since main is 70px margin from the top of the window, the header will overlap it.

In short, do not use values in % in height (except in specific cases). Leave the header with 70px in height and the main with a little more than 70px, so that the header and main do not stick together.