CSS绝对定位菜单在M&S的移动网站上,如何?



不确定这是否是问这个问题的合适地方,如果不是,在哪里?这是一个代码问题,但代码在网站上,很难粘贴在这里。

我正在查看M&S的移动网站,以及他们的菜单系统幻灯片。如果您在 Chrome 中转到"http://www.marksandspencer.com",打开开发工具并使用设备工具栏,它应该会像在移动设备上一样显示。

菜单是nav内的一系列divdivposition: absolute;的,但不知何故,内容不会在底部被切断,页面会扩展到菜单的高度,即使它远远超过页脚的底部。

显然,定位元素绝对会使其脱离正常流程,因此会在页脚底部被切断。

任何人都可以看到他们是如何实现这一目标的..?也就是说,他们的绝对定位div不会被切断。我在任何地方都看不到height属性的任何手动设置。

更新

要查看效果,请转到主页,将视口宽度设置为约500px,然后打开菜单,单击"男士",然后单击"服装"。这导致菜单高于页面内容。

查看带有类mcp-nav-primary__submenu-container is-activediv,您可以看到它position: absolute;

我不是在要求别人为我写代码。

我问是否有人能看到M&S是如何实现这种效果的..?

你每天都能学到新东西。显然,要实现这一目标,什么也不需要做。窗口会自行展开。但请注意,正文和 html 的高度不会扩展。如果你在身体上设置overflow: hidden,它会像你预期的那样被切断。

看到这个小提琴:https://jsfiddle.net/uhqtk13a/

最新更新