2017-07-19 1 views
-2

Nicht sicher, ob dies der geeignete Ort ist, um dies zu fragen, wenn nicht, wo? Es ist eine Code-Frage, aber der Code ist auf einer Website und schwer hier einzufügen.CSS absolut positionierte Menüs auf der mobilen Website von M & S, wie?

Ich bin auf M & S mobile Website, und ihre Folie im Menüsystem, um spezifisch zu sein. Wenn Sie in Chrome auf http://www.marksandspencer.com gehen, die Dev-Tools öffnen und die Gerätesymbolleiste verwenden, sollte es wie auf einem mobilen Gerät angezeigt werden.

Das Menü ist eine Reihe von div 's in einem nav. Die div sind position: absolute;, aber irgendwie wird der Inhalt unten nicht abgeschnitten, die Seite wird auf die Höhe des Menüs erweitert, auch wenn es weit über die Fußzeile hinausgeht.

Offensichtlich nimmt das Positionieren eines Elements es absolut aus dem normalen Fluss heraus und würde daher an der Unterseite der Fußzeile abgeschnitten.

Kann jemand sehen, wie sie das geschafft haben ..? Das heißt, ihre absolut positionierte div wird nicht abgeschnitten. Ich kann keine manuelle Einstellung einer height Eigenschaft irgendwo sehen.

aktualisieren

Um den Effekt zu sehen, auf die Homepage gehen, stellen Sie die Darstellungsbreite auf etwa 500px, dann öffnen Sie das Menü, klicken Sie auf dann ‚Männer‘ ‚Kleidung‘. Dies führt dazu, dass das Menü höher ist als der Inhalt der Seite.

Mit Blick auf die div mit Klassen mcp-nav-primary__submenu-container is-active können Sie sehen, es ist position: absolute;.

Ich frage nicht, ob jemand Code für mich schreiben soll.

Ich frage, ob jemand sehen kann, wie M & S diesen Effekt erreicht haben ..?

+0

Es wird erwartet, dass Sie zumindest versuchen, diese für sich selbst zu codieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben. –

+0

Auf allen Seiten, die ich ausprobiert habe, war die Seite höher als das Menü, also konnte nichts abgeschnitten werden. Hast du ein Beispiel? –

+0

@Paulie_D Erlauben Sie mir, Sie zu korrigieren. Ich bitte niemanden, Code für mich zu schreiben. Die Antwort auf meine Frage muss überhaupt keinen Code beinhalten (genauso wie der, zu dem du verlinkt hast). Meine Frage ist, wie M & S etwas erreicht, und eine vollkommen gute Antwort könnte sein "durch Anwenden der Methode X". Ich könnte dann Methode X recherchieren. Ich bin wirklich interessiert an der Antwort und denke ehrlich, dass andere auch das sein könnten, worum es bei SO geht. Es fühlt sich oft so an, als würden manche Leute eine Frage ohne Code sehen und einen Weg finden, herablassend zu sein. –

Antwort

1

Sie lernen jeden Tag etwas Neues. Anscheinend muss dafür nichts getan werden. Das Fenster expandiert von selbst. Beachten Sie jedoch, dass sich die Höhe von body und html nicht erweitert. Und wenn Sie overflow: hidden auf den Körper setzen, wird es wie erwartet abgeschnitten.

Sehen Sie diese Geige: https://jsfiddle.net/uhqtk13a/

+0

Es ist witzig, ich habe ihre Website zur selben Zeit angeschaut, als du das gepostet hast, und kam gerade in meinem Kopf zu demselben Schluss. Danke dafür, es lohnt sich, auf SO zu posten - wir haben beide heute etwas Neues gelernt! –

Verwandte Themen