Position a section of the layout below a FIXED header

Question

Position a section of the layout below a FIXED header

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

- > I have a layout whose header is fixed at the top.

- > But the section just below is below it and does not follow the same (normal) flow

In this case what is the best way to make the section below below the header?

1) Using position: relative top: px until the section exits under the header?

2) Placing an empty div with the same header height before the section?

css posicionamento

asked by anonymous 28.11.2014 / 19:03

2 answers

Function giving wrong values Get data from fields of the same name but from different tables

score 3 · Answer 1

I usually use the padding-top in the body tag with the same element height, which in this case is, div.header .

Ex:

body{
  margin:0;
  padding-top: 60px;
}

.header{
  height: 60px;
  background-color: #000;
  color: #fff;
  width: 100%;
  position:fixed;
  top:0
}

<div class="header">
  Cabeçalho
</div>
<section>
  <h1>Conteúdo</h1>
</section>

See this example link

score 2 · Answer 2

The ideal is to use margin-top and not position + coordenada because the position should influence the size of the section post header. Otherwise everything that comes after the first section (post-header) will also have to be positioned as well.