Question

所以我有一个固定的标题，DOESN＆T已指定高度。它根据屏幕尺寸调整大小。但是，它固定，所以它下面的形式需要一个边缘顶部，所以它不会坐在它后面和它之上。我需要指定标题的大小吗？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

你可以看到评论的代码（2行），你就会明白我的意思。

Answer 1

不，你不能这样做。 spec具体说：

<强>固定

元素从正常文档流中删除;没有空间   是为页面布局中的元素创建的。相反，它是   相对于屏幕的视口定位，并且在移动时不移动   滚动。

这意味着您无法使用该位置使用CSS定位其后面的元素。

您有两种选择：

使用position:sticky。这会将表单直接放在标题的offsetHeight下方。它不会考虑您的盒子阴影，因此您仍需要在表单中添加margin-top:4px以将其考虑在内。
使用Javascript自动计算标题高度和boxShadow高度：

＆＃13;

// 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';

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用不同的方法解决此问题。我建议的一种简单方法（可能不是最好的方法，但很简单）是复制标题并使其隐藏在位置“静态”。像这样：

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

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

<form>
    ...
</form>

这是demo。

如何获得标题的高度？

2 个答案: