CSS: Header and body positioning

Asked

Viewed 710 times

2

Talk people, I’m dealing with CSS for a personal blog that I intend to create.

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

Below is an initial 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 image of how it’s getting:

Protótipo blog

I tried to replace the header height of:

{
height:70px;
}

for

{
height: 10%;
}

and in main, I changed the margin-top from 70 px to 10%.

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

Problema com o body

Why does this happen? How can I solve?

html css layout header body

  • Pq you have changed the header height if everything looks right in the first print?

  • You’d also have to put all the CSS in the question so we can play the code and parse.

  • In fact, I made the option that was going wrong first and so I tried to solve it. However I would like to understand why I was making a mistake.

1 answer

1

See, when you set the header height in 70px, he will always have 70px regardless of the height of the window. When you switch to 10%, height will be 1/10 (one tenth) of window height, that is, if window height varies, header height also, because it is proportional in 10%.

How did you define 70px upper margin in main, this margin is fixed. Since the header is 10% high in the window, main will always have 70px window top margin, can generate a space (or not) between the header and the main (the space that the main occupies is accounted for in the body, the header is 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 above the main, since the 10% can be larger 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 at 70px window top margin, the header will overwrite it.

In summary, do not use values in % height (except in specific cases). Let the header be 70px high and the main one a little over 70px, so that the header and main are not stuck.

Browser other questions tagged html css layout header body

You are not signed in. Login or sign up in order to post.