为什么我的 div 没有占用所有剩余空间？答案

【问题标题】：Why my div doesn't take all remaining space?为什么我的 div 没有占用所有剩余空间？
【发布时间】：2017-02-25 03:47:57
【问题描述】：

我的网站出现了我不理解的非常奇怪的行为。

为什么我的顶部导航菜单和联系按钮没有显示？

我认为class='intro' 的 100% 高度搞砸了。它占用了太多的高度（950px，应该更少）。我已将其设置为 100% 高度，因为我希望它占用第一部分的所有剩余空间，但它占用的高度比这更多。

我很迷茫，我什至不知道该问什么..这里出了什么问题？

https://cgonen.github.io/testpage/

【问题讨论】：

您好，您需要在 SO 上的帖子中以minimal reproducible example 的形式发布相关代码以重现您的问题。
所以我应该删除我的问题吗？并尽可能少地重建网站。
您应该只使用相关代码来复制问题，这样我们就不必去第 3 方网站（随着时间的推移会发生变化，这使得这篇文章随着时间的推移与其他人无关）问题）并筛选一堆不相关的代码。
嘿迈克尔，我认为有时问题是，Stack 上的演示并不总是可以正常工作，所以人们在这里创建一个非工作演示并在外部链接另一个演示。并不是说这里就是这种情况，但对我来说不止一个帐户。

标签： html css fullpage.js

【解决方案1】：

像这样将 position:absolute 添加到您的顶部菜单中，

更新：

.hero {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1040px;
    height: 500px;
    position: absolute;
    margin: 0 auto;
    background-size: cover;
    background-image: url("img/goodtech-o.jpg");
    border-bottom: 2px solid seagreen;
}

【讨论】：

必须使用绝对位置对我来说没有多大意义......而且它消除了响应能力。此外，.intro div 有按钮和其中的一个段落也消失了。为什么它不像..正常工作..？因为 .hero 是一个正常的显示 flex。菜单是一个普通的显示框。
我的错误我没有看到。放置位置：绝对适合您的英雄。至于响应能力……不管怎样，你的图片没有响应，其他的都是。
查看更新代码。注意，宽度和最大宽度以及位置。