CODEWITHSUNDEEP
htmlcss
Owpur
Owpur

Reputation: 203

How would I get the height of my header?

So I have a fixed header that DOESN'T have a height specified. It just resizes however it wants according to screen size. But, its fixed so the form below it needs a margin-top so it doesn't sit in front behind it and over it. Would I need to specify a size for the header?

html,
body {
  padding: 0;
  margin: 0 auto;
  text-align: center;
  background-color: #ffffff;
  width: 100%;
}

header {
  /*background-color: white;*/
  top: 0;
  position: fixed;
  width: 100%;
  padding-bottom: 1%;
  padding-top: 1%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 1;
}

form {
  padding: 0;
  margin: 0;
  /*margin-top: 10%;*/
  text-align: center;
  display: inline-block;
  background-color: red;
}

form input {
  margin: 0;
  text-align: center;
  appearance: none;
  outline: none;
  border: 1px solid red;
  border-radius: 3px;
  box-sizing: border-box;
}
<header>
  <nav>
    <ul>
      <li><a href="includes/php/done.php">done</a></li>
    </ul>
  </nav>
</header>

<form class="login">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <input id="loginbtn" type="button" name="submit" value="login">
</form>

You can see the commented code(2 lines) and you'll kinda see what I mean.

Upvotes: 3

Views: 6814

Answers (3)

Vivek Nain
Vivek Nain

Reputation: 93

I have a very simple approach. You won't need to know the height of the header in this case.

<div id=1>          // flex, verticle, vh=100
  <div id=2></div>  // your header, position sticky top
  <div id=3></div>  // flex-fill
</div>

Upvotes: 0

evilReiko
evilReiko

Reputation: 20503

You can solve this with different approaches. One easy way I'd suggest (might be not best approach, but easy one) is duplicate the header and make it hidden with position "static". Like so:

<!-- original header -->
<header>
    ...
</header>

<!-- duplicated header -->
<header style="position: static; visibility: hidden;">
    ...
</header>

<form>
    ...
</form>

Here's a demo.

Upvotes: 0

Jorjon
Jorjon

Reputation: 5434

No, you can't do that. The spec specifically says:

fixed

The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to the screen's viewport and doesn't move when scrolled.

So that means you can't use the position to position elements behind it with CSS.

You have two options:

  1. Use position:sticky. This will place the form directly below the offsetHeight of the header. It will not take into account your box-shadow, so you will still need to add a margin-top:4px in the form to take that into account.
  2. Use Javascript to both calculate automatically the header height and the boxShadow height:

// get total height for <header>, including padding
var headerEl = document.getElementById("header");
var headerHeight = +headerEl.offsetHeight;
var headerBoxShadow = window.getComputedStyle(headerEl).boxShadow;
var headerBoxShadowY = +headerBoxShadow.split("px")[2].trim();

// set margin-top to <form> depending on <header> height
var formEl = document.getElementById("form");
formEl.style.marginTop = headerHeight + headerBoxShadowY + 'px';
html,
body {
  padding: 0;
  margin: 0 auto;
  text-align: center;
  background-color: #ffffff;
  width: 100%;
}

header {
  background-color: white;
  top: 0;
  position: fixed;
  width: 100%;
  padding-bottom: 1%;
  padding-top: 1%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 1;
}

form {
  padding: 0;
  margin: 0;
  text-align: center;
  display: inline-block;
  background-color: red;
}

form input {
  margin: 0;
  text-align: center;
  appearance: none;
  outline: none;
  border: 1px solid red;
  border-radius: 3px;
  box-sizing: border-box;
}
<header id="header">
  <nav>
    <ul>
      <li><a href="includes/php/done.php">done</a></li>
    </ul>
  </nav>
</header>

<form class="login" id="form">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <input id="loginbtn" type="button" name="submit" value="login">
</form>

Upvotes: 1

Related Questions