时间戳

首页 > 解决方案 > 我正在尝试制作一个带有固定位置菜单的响应式网站。如何获得菜单 div 的大小以将容器向下推？

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

问题描述

我希望有一种方法可以在不使用 javascript 的情况下做到这一点，但如果必须，我们必须这样做。我正在尝试更新我的投资组合以响应，我已经碰到了我的第一面墙。

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

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

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

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

这是我的小提琴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;
}

标签： javascripthtmlcss

解决方案

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

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

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

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

对于您的标题，它们突出到右侧的原因是因为您的#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;
 }

推荐阅读