javascript - 我正在尝试制作一个具有固定位置菜单的响应式网站。如何获得菜单 div 的大小以将容器向下推？

Question

我希望有一种方法可以不使用 javascript 来做到这一点，但如果我们必须这样做的话。我正在尝试更新我的投资组合以做出响应，但我遇到了第一堵墙。

我想要一个固定在顶部的菜单。接下来是将投资组合容器排列到菜单底部，无论它的高度是多少。

另一件事是，当我将不同的部分放入我的作品集容器中时，使背景颜色一直向左延伸的代码不再起作用。

我试过使用 z-index 和菜单的位置来解决投资组合背景问题，但我不确定这是否会使菜单间距问题变得更难。

我还尝试制作一个与菜单大小相同的虚拟 div，以将其他 div 向下推。虽然它解决了一些问题，但它带来了更多。

这是我的 fiddle https://jsfiddle.net/Spiderian/wf58yh6r/1/

这是我的代码:

#menu {
z-index: 100;
min-height: 96px;
position: fixed;
top: 0px;
left: 0px;
background-color: #62af45;
}
#menu:before {
content:"";
background-color: #62af45;
position: absolute;
height: 100%;
width: 200vw;
left: -100vw;
z-index: -1;
}
#portfolio {
overflow-y: auto;
position: relative;
width: 300%
}
#portfolio:before {
content:"";
position: absolute;
height: 100%;
width: 200vw;
left: -100vw;
z-index: -1;
}

Answer 1

对于固定菜单，您需要手动设置 body 的 padding-top 以将内容向下推。在您的情况下，您的菜单设置为 96px 的最小高度。

最好设置高度，这样您就不必担心它会在您身上发生变化。这样您就可以毫无问题地设置 body 元素的 padding-top。

当屏幕太小时，您应该使用下拉菜单。但是，您必须为此使用 javascript。

看这里: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

对于您的 header ，它们向右突出的原因是因为您的#wrapper 元素的“margin: 0 auto”。您需要做的就是删除该行代码。此外，您的 body 元素有一些边距，因此您应该将其设置为 0。

它们应该是这样的:

body {
    background-color: black;
    padding-top: 106px;
    margin: 0;
}
#wrapper {
    max-width: 1040px;
    padding: 0;
}

#menu {
    z-index: 100;
    height: 96px;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #62af45;
}

固定菜单本质上会覆盖内容。为了根据菜单的大小下推内容，您必须将菜单从“固定”更改为“相对”。

你会像这样改变你的菜单:

#menu {
    position: relative;
    float: left;
    clear:left;
    right:0;
    left:0;
    top:0;
    background-color: #62af45;
 }