How to calculate size of a header div to do the correct spacing?

Question

How to calculate size of a header div to do the correct spacing?

Navigation

#1 by (1 votes)

2

Hello,

I have a site with a fixed menu at the top which I put the class header, and it accompanies the scroll bar, I know that my other div with the content class needs a margin according to the height of the header to not stay capped. My question is how I do it flexibly. That regardless of the height of the header the margin of the div contain is changed without needing to change the margin all the time.

html {
  background-color: #bcbcbc;
}

.header {
  background-color: white;
  height: 100px;
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
}

.header h2{
     text-align: center;
}

.content{
  height: 100%;
  
}
.footer {
  background-color: black;
  height: 100px;
  width: 100%;

}

<div class="header">	
  <h2>FIXED</h2>
</div>
  
<div class="content">	
  <h1>Conteudo</h1>
  <h1>Conteudo</h1>
  <h1>Conteudo</h1>
  <h1>Conteudo</h1>
  <h1>Conteudo</h1>
  <h1>Conteudo</h1>

</div>
<div class="footer">
</div>

html css

asked by anonymous 14.11.2018 / 19:18

1 answer

Lack of security page register compare dates within the sql query

score 1 · Accepted Answer

You can replace position:fixed with position:sticky you can read more about it here: link

As Jorge said in the comment according to Can I Use this property does not work in IE link But keep in mind that Windows 10 which is the current default browser is the Edge not IE, and that from now on IE only tends to disappear, and may not even come in the next versions of Windows ...

See how the result is, I put a transparency on the top just to see that there is nothing underneath ...

html {
    background-color: #bcbcbc;
}

body {
    margin: 0;
}

.header {
    background-color: rgba(255, 255, 255, 0.5);
    height: 100px;
    top: 0;
    left: 0;
    width: 100%;
    position: sticky;
}

.header h2 {
    text-align: center;
    margin: 0;
}

.content {
    height: 100%;

}

.footer {
    background-color: black;
    height: 100px;
    width: 100%;

}

<div class="header">
    <h2>FIXED</h2>
</div>

<div class="content">
    <h1>Conteudo</h1>
    <h1>Conteudo</h1>
    <h1>Conteudo</h1>
    <h1>Conteudo</h1>
    <h1>Conteudo</h1>
    <h1>Conteudo</h1>

</div>
<div class="footer">
</div>