Div有时在页面加载时消失，并且仅在重新加载或调整大小时出现

Question

我遇到了一个奇怪的问题，我似乎无法解决，它是如此的具体和怪异，以至于我找不到合适的文章。

以下是显示错误的JSfiddle：http://jsfiddle.net/trqngk10/1/

document.addEventListener("DOMContentLoaded", function() {
  var headerHeight = document.getElementById('header').clientHeight;
  document.getElementById("content").style.paddingTop = headerHeight + "px";
  var footerHeight = document.getElementById('footer').clientHeight;
  document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);

window.addEventListener('resize', function() {
  var headerHeight = document.getElementById('header').clientHeight;
  document.getElementById("content").style.paddingTop = headerHeight + "px";
  var footerHeight = document.getElementById('footer').clientHeight;
  document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);

function setContentHeight() {
  if (window.innerWidth > window.innerHeight) {
    var headerHeight = document.getElementById('header').clientHeight;
    var footerHeight = document.getElementById('footer').clientHeight;
    document.getElementById("description").style.height = `calc(100% -  ${headerHeight}px - ${footerHeight}px)`;
  } else {
    document.getElementById("description").style.height = "";
  }
  document.getElementById("description").style.top = `${headerHeight}px`;
}

window.addEventListener('load', setContentHeight, true);
window.addEventListener('resize', setContentHeight, true);

$('#nav ul>li').click(function() {
  $(this).find('ul').toggle();
});

$('#footer-nav ul>li').click(function() {
  $(this).find('ul').toggle();
});

$(document).ready(function() {
  $("#logo img").hover(function() {
    $("#background").css("background-color", "black");
  }, function() {
    $("#background").css("background-color", "white");
  });
});

$(document).ready(function() {
  $("#logo img").hover(function() {
    $("#header").css("background-color", "black");
  }, function() {
    $("#header").css("background-color", "white");
  });
});

$(document).ready(function() {
  $("#logo img").hover(function() {
    $("#nav").css("background-color", "black");
  }, function() {
    $("#nav").css("background-color", "white");
  });
});

$(document).ready(function() {
  $("#logo img").hover(function() {
    $("#nav ul").css("color", "white");
  }, function() {
    $("#nav ul").css("color", "black");
  });
});

$(document).ready(function() {
  $("#logo img").hover(function() {
    $("#footer").css("background-color", "black");
  }, function() {
    $("#footer").css("background-color", "white");
  });
});

$(document).ready(function() {
  $("#logo img").hover(function() {
    $("#footer-nav ul").css("color", "white");
  }, function() {
    $("#footer-nav ul").css("color", "black");
  });
});

$(document).ready(function() {
  $("#logo img").hover(function() {
    $("h2").css("color", "white");
  }, function() {
    $("h2").css("color", "black");
  });
});

$(document).ready(function() {
  $("#logo img").hover(function() {
    $("p").css("color", "white");
  }, function() {
    $("p").css("color", "black");
  });
});

$(document).ready(function() {
  $("#logo img").hover(function() {
    $("h3").css("color", "white");
  }, function() {
    $("h3").css("color", "black");
  });
});

$(document).ready(function() {
  $("#logo img").hover(function() {
    $("h4").css("color", "white");
  }, function() {
    $("h4").css("color", "black");
  });
});

@charset "UTF-8";
p {
  font-family: Arial;
  font-size: 15px;
  font-weight: normal;
  color: #000000;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 auto;
  margin-top: 17px;
  margin-bottom: 17px;
}

h2 {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 0px;
  margin-bottom: 10px;
}

h3 {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 17px;
  margin-bottom: 0;
}

#background {
  background-color: #FFFFFF;
  margin: 0px;
  padding: 0px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}

a.nonblocklink {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

a.nonblocklinkinp {
  text-decoration: none;
  color: inherit;
}

a.nonblocklinkinp:hover {
  background-color: #000;
  color: #fff;
}

a.nonblocklinkterm {
  text-decoration: none;
  color: inherit;
}

a.nonblocklinkterm:hover {
  background-color: #000;
  color: #fff;
}

a.blocklink {
  text-decoration: none;
  color: inherit;
  display: block;
}

#header {
  background-color: white;
  width: 100%;
  position: fixed;
  margin: 0px;
  padding: 0px;
  padding-top: 10px;
  top: 0;
  left: 0;
  text-align: center;
  z-index: 10;
}

#logo {
  width: 50%;
  margin: auto;
}

#logo img {
  width: 100%;
}

#logo img:hover {
  -webkit-filter: invert(100%) !important;
}

#nav {
  width: 100%;
  background-color: white;
}

#projects {
  display: inline-block;
}

#nav ul {
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  list-style-type: none;
  text-align: center;
  margin: auto;
  padding-top: 6px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#description {
  width: calc(100% - 20px);
  margin: 0 auto;
  margin-bottom: 17px;
}

#next {
  display: none;
}

h4 {
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 0px;
}

#nav ul ul {
  width: calc(100% - 20px);
  list-style-type: none;
  font-weight: normal;
  display: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#nav ul li:hover>ul {
  display: block;
  position: fixed;
  text-align: center;
  margin: 0 auto;
  padding-top: 10px;
  left: 0;
  right: 0;
  overflow: auto;
  max-height: 75%;
}

#one {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  color: #000000;
  background-color: white;
}

#one:active {
  background-color: black;
  color: white;
}

#one:hover {
  background-color: black;
  color: white;
}

#footer {
  width: 100%;
  background-color: white;
  position: fixed;
  margin: 0px;
  bottom: 0;
  left: 0;
  text-align: center;
  z-index: 11;
}

#footer-nav {
  width: 100%;
}

#connect {
  display: inline-block;
  padding-top: 10px;
}

#footer-nav ul {
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  list-style-type: none;
  text-align: center;
  margin: auto;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#footer-nav ul ul {
  width: calc(100% - 20px);
  list-style-type: none;
  font-weight: normal;
  display: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#footer-nav ul li:hover>ul {
  display: block;
  position: absolute;
  bottom: 100%;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  padding-bottom: 0;
}

#email {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  border-top: 0px;
  color: #000000;
  background-color: white;
}

#email:active {
  background-color: black;
  color: white;
}

#email:hover {
  background-color: black;
  color: white;
}

#twitter,
#vimeo {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  border-top: 0px;
  color: #000000;
  background-color: white;
}

#twitter:active,
#vimeo:active {
  background-color: black;
  color: white;
}

#twitter:hover,
#vimeo:hover {
  background-color: black;
  color: white;
}

#instagram {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  color: #000000;
  background-color: white;
}

#instagram:active {
  background-color: black;
  color: white;
}

#instagram:hover {
  background-color: black;
  color: white;
}

#content {
  margin: 0px;
  top: 0;
  left: 0;
  width: 100%;
  align-content: center;
  position: absolute;
  text-align: center;
}

#content-wrapper {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: block;
}

@media screen and (orientation: landscape) {
  #logo,
  #nav ul ul,
  #footer-nav ul ul {
    width: 20%;
  }
  #content-wrapper {
    width: 50%;
  }
  #description {
    margin-left: 20px;
    margin-bottom: 0;
    width: 20%;
    position: fixed;
    overflow: auto;
  }
  #next {
    display: block;
    right: 0;
    margin-right: 20px;
    width: 20%;
    position: fixed;
  }
  p,
  h2 {
    text-align: left;
    font-size: 15px;
    margin-bottom: 17px;
  }
  h3 {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Test</h1>
<div id="background"></div>
<header id="header">
  <div id="logo">
    <a href="/" class="nonblocklink"><img alt="A logo." src="images/logo.png"></a>
  </div>
  <div id="nav">
    <ul>
      <li id="projects">
        Projects
        <ul>
          <a href="/one" class="blocklink">
            <li id="one">One</li>
          </a>
        </ul>
      </li>
    </ul>
  </div>
</header>
<div id="content">
  <div id="next">
    <h4><a href="/one" class="nonblocklinkinp">First Project &#x2192;</a></h4>
  </div>
  <div id="description">
    <h2>Test</h2>
    <p>Test test test test test test test test test test.</p>
    <h3><a href="/one" class="nonblocklinkinp">First Project &#x2192;</a></h3>
  </div>
</div>
<footer id="footer">
  <div id="footer-nav">
    <ul>
      <li id="connect">
        Connect
        <ul>
          <a href="https://www.instagram.com/" target="_blank" class="blocklink">
            <li id="instagram">
              Instagram
            </li>
          </a>
          <a href="https://vimeo.com/" target="_blank" class="blocklink">
            <li id="vimeo">
              Vimeo
            </li>
          </a>
          <a href="mailto:info@.com" class="blocklink">
            <li id="email">
              Email
            </li>
          </a>
        </ul>
      </li>
    </ul>
  </div>
</footer>

有时“第一个项目”会显示出来，有时它会跳起来并且大概隐藏在我的标题后面。只需在小提琴上单击“运行”，直到出现“第一个项目”即可。如果幸运的是第一次尝试出现，请刷新页面，直到消失。为什么会这样呢？我需要它在任何时候都可见并且正确放置。我可以想象这个问题与我的JavaScript和一切加载的顺序有关。好像原先正确放置它，然后在加载标题中的图像后跳到了标题后面。我是编码的初学者，但希望你们中的一位大师能看到我要去哪里出错了！

也仅出于一些背景信息，因为我的标题使用的图像尺寸可变，因此标题的高度取决于查看设备。因此，我有一个脚本，可以在页面加载后找到页眉的高度，然后设置相对于页眉高度的内容div（放置“第一个项目”的位置）的位置。有点难以解释，但希望您一旦看过代码便会理解。正确的做法真的很痛苦。如此接近我想要的工作。

小提琴中的一些脚本：

function setContentHeight() {
if (window.innerWidth > window.innerHeight) {
var headerHeight = document.getElementById('header').clientHeight;
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("description").style.height = `calc(100% -      ${headerHeight}px - ${footerHeight}px)`;
} else{
document.getElementById("description").style.height = "";    
}
document.getElementById("description").style.top = `${headerHeight}px`;
}

window.addEventListener('load', setContentHeight, true);
window.addEventListener('resize', setContentHeight, true);

谢谢！

还：我忘记提到的一件事是，当“第一个项目”消失时，如果您调整窗口的大小，它将重新出现。这可以帮助您发现问题。

也：当观察设备为纵向时，“测试”也会发生相同的情况。我可以想象，无论如何解决风景问题，都可以应用于肖像问题。

更新：我已经删除了不适用于此问题的所有CSS。我的错误：）

Answer 1

我清理了代码，我认为问题是您正在计算页面加载之前的高度。另外，您仅在调整页面大小时才调用setContentHeight();，而不是在页面加载时调用。

let headerNode;
let footerNode;
let contentNode;
let descriptionNode;

let headerHeight;
let footerHeight;

window.addEventListener('load', updateLayout, true);
window.addEventListener('resize', updateLayout, true);

// Shorthand for $( document ).ready()
$(function() {
  console.log('ready!');
  initLayout();
  initHandlers();
  updateHeigth();
  setContentHeight();
});

function initLayout() {
  headerNode = document.getElementById('header');
  footerNode = document.getElementById('footer');
  contentNode = document.getElementById('content');
  descriptionNode = document.getElementById('description');
}

function initHandlers() {
  $('#nav ul>li').click(function() {
    $(this).find('ul').toggle();
  });

  $('#footer-nav ul>li').click(function() {
    $(this).find('ul').toggle();
  });
  $("#logo img").hover(function() {
    $("#background").css("background-color", "black");
    $("#header").css("background-color", "black");
    $("#nav").css("background-color", "black");
    $("#nav ul").css("color", "white");
    $("#footer").css("background-color", "black");
    $("#footer-nav ul").css("color", "white");
    $("h2").css("color", "white");
    $("p").css("color", "white");
    $("h3").css("color", "white");
    $("h4").css("color", "white");
  }, function() {
    $("#background").css("background-color", "white");
    $("#header").css("background-color", "white");
    $("#nav").css("background-color", "white");
    $("#nav ul").css("color", "black");
    $("#footer").css("background-color", "white");
    $("#footer-nav ul").css("color", "black");
    $("h2").css("color", "black");
    $("p").css("color", "black");
    $("h3").css("color", "black");
    $("h4").css("color", "black");
  });
}

function updateLayout() {
  updateHeigth();
  setContentHeight();
}

function updateHeigth() {
  if (!contentNode) return;
  if (headerNode) {
    headerHeight = headerNode.clientHeight;
    contentNode.style.paddingTop = headerHeight + 'px';
  }
  if (footerNode) {
    footerHeight = footerNode.clientHeight;
    contentNode.style.paddingBottom = footerHeight + 'px';
  }
}

function setContentHeight() {
  if (!descriptionNode) return;
  let newHeight = window.innerWidth > window.innerHeight ? `calc(100% -  ${headerHeight}px - ${footerHeight}px)` : '';

  descriptionNode.style.height = newHeight;
  descriptionNode.style.top = `${headerHeight}px`;
}

@charset "UTF-8";
p {
  font-family: Arial;
  font-size: 15px;
  font-weight: normal;
  color: #000000;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 auto;
  margin-top: 17px;
  margin-bottom: 17px;
}

h2 {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 0px;
  margin-bottom: 10px;
}

h3 {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 17px;
  margin-bottom: 0;
}

#background {
  background-color: #FFFFFF;
  margin: 0px;
  padding: 0px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}

a.nonblocklink {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

a.nonblocklinkinp {
  text-decoration: none;
  color: inherit;
}

a.nonblocklinkinp:hover {
  background-color: #000;
  color: #fff;
}

a.nonblocklinkterm {
  text-decoration: none;
  color: inherit;
}

a.nonblocklinkterm:hover {
  background-color: #000;
  color: #fff;
}

a.blocklink {
  text-decoration: none;
  color: inherit;
  display: block;
}

#header {
  background-color: white;
  width: 100%;
  position: fixed;
  margin: 0px;
  padding: 0px;
  padding-top: 10px;
  top: 0;
  left: 0;
  text-align: center;
  z-index: 10;
}

#logo {
  width: 50%;
  margin: auto;
}

#logo img {
  width: 100%;
}

#logo img:hover {
  -webkit-filter: invert(100%) !important;
}

#nav {
  width: 100%;
  background-color: white;
}

#projects {
  display: inline-block;
}

#nav ul {
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  list-style-type: none;
  text-align: center;
  margin: auto;
  padding-top: 6px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#description {
  width: calc(100% - 20px);
  margin: 0 auto;
  margin-bottom: 17px;
}

#next {
  display: none;
}

h4 {
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 0px;
}

#nav ul ul {
  width: calc(100% - 20px);
  list-style-type: none;
  font-weight: normal;
  display: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#nav ul li:hover>ul {
  display: block;
  position: fixed;
  text-align: center;
  margin: 0 auto;
  padding-top: 10px;
  left: 0;
  right: 0;
  overflow: auto;
  max-height: 75%;
}

#one {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  color: #000000;
  background-color: white;
}

#one:active {
  background-color: black;
  color: white;
}

#one:hover {
  background-color: black;
  color: white;
}

#footer {
  width: 100%;
  background-color: white;
  position: fixed;
  margin: 0px;
  bottom: 0;
  left: 0;
  text-align: center;
  z-index: 11;
}

#footer-nav {
  width: 100%;
}

#connect {
  display: inline-block;
  padding-top: 10px;
}

#footer-nav ul {
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  list-style-type: none;
  text-align: center;
  margin: auto;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#footer-nav ul ul {
  width: calc(100% - 20px);
  list-style-type: none;
  font-weight: normal;
  display: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#footer-nav ul li:hover>ul {
  display: block;
  position: absolute;
  bottom: 100%;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  padding-bottom: 0;
}

#email {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  border-top: 0px;
  color: #000000;
  background-color: white;
}

#email:active {
  background-color: black;
  color: white;
}

#email:hover {
  background-color: black;
  color: white;
}

#twitter,
#vimeo {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  border-top: 0px;
  color: #000000;
  background-color: white;
}

#twitter:active,
#vimeo:active {
  background-color: black;
  color: white;
}

#twitter:hover,
#vimeo:hover {
  background-color: black;
  color: white;
}

#instagram {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  color: #000000;
  background-color: white;
}

#instagram:active {
  background-color: black;
  color: white;
}

#instagram:hover {
  background-color: black;
  color: white;
}

#content {
  margin: 0px;
  top: 0;
  left: 0;
  width: 100%;
  align-content: center;
  position: absolute;
  text-align: center;
}

#content-wrapper {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: block;
}

@media screen and (orientation: landscape) {
  #logo,
  #nav ul ul,
  #footer-nav ul ul {
    width: 20%;
  }
  #content-wrapper {
    width: 50%;
  }
  #description {
    margin-left: 20px;
    margin-bottom: 0;
    width: 20%;
    position: fixed;
    overflow: auto;
  }
  #next {
    display: block;
    right: 0;
    margin-right: 20px;
    width: 20%;
    position: fixed;
  }
  p,
  h2 {
    text-align: left;
    font-size: 15px;
    margin-bottom: 17px;
  }
  h3 {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Test</h1>
<div id="background"></div>
<header id="header">
  <div id="logo">
    <a href="/" class="nonblocklink"><img alt="A logo." src="http://pngimg.com/uploads/intel/intel_PNG25.png"></a>
  </div>
  <div id="nav">
    <ul>
      <li id="projects">
        Projects
        <ul>
          <a href="/one" class="blocklink">
            <li id="one">One</li>
          </a>
        </ul>
      </li>
    </ul>
  </div>
</header>
<div id="content">
  <div id="next">
    <h4><a href="/one" class="nonblocklinkinp">First Project &#x2192;</a></h4>
  </div>
  <div id="description">
    <h2>Test</h2>
    <p>Test test test test test test test test test test.</p>
    <h3><a href="/one" class="nonblocklinkinp">First Project &#x2192;</a></h3>
  </div>
</div>
<footer id="footer">
  <div id="footer-nav">
    <ul>
      <li id="connect">
        Connect
        <ul>
          <a href="https://www.instagram.com/" target="_blank" class="blocklink">
            <li id="instagram">
              Instagram
            </li>
          </a>
          <a href="https://vimeo.com/" target="_blank" class="blocklink">
            <li id="vimeo">
              Vimeo
            </li>
          </a>
          <a href="mailto:info@.com" class="blocklink">
            <li id="email">
              Email
            </li>
          </a>
        </ul>
      </li>
    </ul>
  </div>
</footer>