在M＆S的手機網站上CSS絕對定位菜單，怎麼樣？

-2

不知道這是否適合問這個問題，如果不是，在哪裏？這是一個代碼問題，但代碼位於網站上，很難粘貼到此處。在M＆S的手機網站上CSS絕對定位菜單，怎麼樣？

我正在尋找M的& S的移動網站，以及他們在菜單系統中的具體滑動。如果您在Chrome中訪問http://www.marksandspencer.com，請打開開發工具並使用設備工具欄，它應該顯示爲像在移動設備上一樣。

該菜單是div的一系列內部nav。 div的內容爲position: absolute;，但不知何故內容不會在底部切斷，即使頁面超過頁腳底部，頁面也會擴展到菜單的高度。

很顯然，定位一個元素絕對會將它從正常流程中移出，因此會在頁腳底部切斷。

任何人都可以看到他們如何設法實現這個..？也就是說，他們的絕對定位div的不切斷。我無法在任何地方看到任何手動設置的height屬性。

更新

要看到效果，轉到主頁，視口寬度設置爲大約500像素，然後打開菜單，點擊「男人」，然後「服裝」。這導致菜單高於頁面的內容。

看div與類mcp-nav-primary__submenu-container is-active你可以看到它是position: absolute;。

我不是要求某人爲我寫代碼。

我在問有沒有人可以看到M & S已經達到了這種效果..？

來源

2017-07-19 Stephen Last

預計你至少試圖自己編碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

我試過的所有頁面都比菜單高，所以沒有東西可以被切斷。你有一個例子嗎？ –

@Paulie_D請允許我糾正你。我絕不會要求別人爲我寫代碼。我的問題的答案不需要涉及代碼（就像你鏈接的代碼一樣）。我的問題是，M＆S如何實現某些目標，並且一個完美的答案可能是「通過應用方法X」。然後我可以研究方法X.我真的對答案感興趣，並且誠實地認爲其他人可能也是這樣，這就是SO的全部內容。它通常會讓一些人看到一個沒有代碼的問題，並想找到一種居高臨下的方式。 –

你每天都會學到新的東西。顯然沒有必要做到這一點。窗口自行擴展。但請注意，body和html的高度不會擴大。如果您在身體上設置了overflow: hidden，則會按照您的預期切斷。

看到這個提琴：https://jsfiddle.net/uhqtk13a/

來源

2017-07-20 10:00:02

這很有趣，我在查看他們的網站時，同時發佈了這個，並且在我的腦海中剛剛得出同樣的結論。非常感謝，因此非常值得發表 - 我們今天都學到了新的東西！ –

在M＆S的手機網站上CSS絕對定位菜單，怎麼樣？

回答

相關問題