Fixed header but something is missing-CodePudding

I want to make a fixed header so I follow the steps listed in W3School, but the content becomes shorter... I don't know how to say, please see the pictures. This is the picture that I follow the code

.header {
    overflow: hidden;
    width: 100%;
    height: 46px;
    background-color: #2f4779;
    position: fixed;
    top: 0;
    z-index: 100;
}

<div >
        <div >
            <a href="index.html">123</a>
        </div>
        <div >
            <ul>
                <li>Discover and Explore</li>
            </ul>
        </div>
    </div>

And here is the picture that I didn't write the fixed header. Without fixed header

My plan is to make everything inside the viewport. How can I solve the problem?

CodePudding user response：

Well, when you give an element a fixed (or absolute) position, it is removed from the normal flow, so you need to add a padding top of 46px (eaqual to header's height) to the section that follows the header.

CodePudding user response：

Generally what I do in this situation is to add padding to the top of the body so it works for every page, and also use a css variable to keep the sizing consistant.

:root {
  --headerHeight: 46px;
}

header {
  height: var(--headerHeight);
  background-color: #2f4779;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

body {
  padding-top: var(--headerHeight);
}

section {
  height: 200vh;
}

<header></header>
<section>
  <h1>Test</h1>
</section>

CodePudding user response：

You'd probably benefit from using CSS Grids or CSS Flexbox. grid-template-columns is a great property and it makes your life a lot easier.

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

Do give them a read :)