How to create fixed header without javascript?

Question

I want to create a header in an html page, responsive style that adapts the mobile platform and the page reduction in the browser, as I do?

Note: Nothing I read on the internet at the time was use, I want no javascript.

Answer 1

You can do with css yes!

The basic:

HTML:

<header>Menu</header>

CSS:

header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
}

Example of Basic with just a few customizations:

/* Header e Nav */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #342e37;
  color: #fafffd;
  height: 50px;
}
header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
header nav ul li {
  float: left;
}
header nav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
header nav ul li a:hover {
  background-color: #111;
}
hr {
  margin-top: 80px;
}
p {
  text-align: justify;
}

<header>
  <nav>
    <ul>
      <li><a href="#index">Página inicial</a>
      </li>
      <li><a href="#sobre">Sobre</a>
      </li>
      <li><a href="#contato">Contato</a>
      </li>
    </ul>
  </nav>
</header>
<hr>
<h2 id="index">Lorem ipsum</h2>
<p>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
  Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
  quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</p>
<h2>Lorem ipsum</h2>
<p>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
  Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
  quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</p>
<h2 id="sobre">Lorem ipsum</h2>
<p>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
  Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
  quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</p>
<h2>Lorem ipsum</h2>
<p>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
  Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
  quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</p>
<h2>Lorem ipsum</h2>
<p>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
  Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
  quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</p>
<h2 id="contato">Lorem ipsum</h2>
<p>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
  Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
  quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</p>

You can create your menu in the header and use media query to adapt it according to resolution.

Reference: http://bradfrost.com/blog/mobile/fixed-position/

Answer 2

You can use the width and height property in css:

header{
  width: 100vw;
  height: 100vh;
}

But if you really want to have a website that is Responsive to different screens, use media query (very easy):

/*-----------RESPONSIVE FOR THE IPHONE SCREEN-------------*/

@media only screen and (max-width:760px){

/*****************************************
         MUDAR PROPRIEDADES DE H1 NA TELA DE IPHONE
*****************************************/
    h1{ 
        font-size: 250%;
        word-spacing: 0px;
        letter-spacing: -2px;
        margin-bottom: 20px;
        width: 98%;
        margin-left: 1%;

    }
}