导航在浏览器调整大小时低于内容答案

【问题标题】：nav going below content on browser resize导航在浏览器调整大小时低于内容
【发布时间】：2013-09-10 19:32:38
【问题描述】：

我有一个奇怪的问题，我想不通。我正在开发一些独立于我网站其他部分的导航（即响应式），并且一切进展顺利，除了一件事。如果您以正常桌面大小加载页面，则导航正确地位于占位符图像上方。但是，如果您将浏览器窗口的大小调整为更窄，使其切换到平板电脑大小，然后再次将其调整为更宽，则导航将位于占位符图像下方。

也许这很简单，也许不是。我想不通。

我的html结构是

<body>
<div id="page">
<div id="wrapper">
    <nav></nav>
    <section id="content"></section>
</div>
</div>
</body>

所以我不确定内容部分是如何超出导航的，但是如果您在执行上述调整大小后检查代码并查看 html，则代码变为

<body>
<div id="page">
<div id="wrapper">
    <section id="content"></section>
    <nav></nav>
</div>
</div>
</body>

我不确定是不是我正在使用的 javascript 或者是什么交易在处理它而不是重置它。肯定不是缺少 CSS 声明...

编辑：已解决！谢谢克里斯！

【问题讨论】：

“我不确定是我使用的 javascript 还是什么”——确实如此。禁用javascript，它不会发生。看起来 javascript 在较小的屏幕上将 .content 移动到 nav 上方，而不是将其移回。请在此处粘贴 JavaScript。
javascript 以某种方式删除了导航，然后当它重新添加它时，它被放置在 section 标签下方。
这里是 javascript 的链接。我不确定如何编写代码以将
放回
上方。
我希望那不是 JavaScript，而是 3400 多行代码 :)

【解决方案1】：

查看从第 #2619 行开始的代码，destroy 函数期望有一个元素 #header，但它并不存在。添加元素#header 作为#wrapper 中的第一个元素，问题就会解决。我假设这不是您的 JavaScript，所以我不建议更改它；相反，请调整您的标记以使其符合预期。

【讨论】：

你是个天才（或者我不善于观察），因为你完全正确。我已经删除了#header 的代码，因为我不需要它并且它不是导航的一部分——我没有意识到它引用了那个ID。我在包装器之后添加了一个空 div 并将其关闭。给它一个新的 ID 名称，更改 javascript 以引用该 ID 名称，一切都已修复！现在我可以重新专注于设计，而不是“为什么这不起作用？”你统治！

【解决方案2】：

尝试更改 navigation.js 行

a.elt.insertAfter("#content");

到

a.elt.insertAfter("#header");

【讨论】：

这可能有效。我没试过所以不确定！我正在研究 Chris 的建议，接到一个电话，完成了他的建议，测试了它，然后回到这里说它有效。我刚刚看到你的回复；对不起。感谢您花时间帮助我！我很感激！