2017-07-19 4 views
-2

これが適切な場所であるかどうかわからない場合は、どこですか?コードの質問ですが、コードはウェブサイト上にあり、ここに貼り付けるのは難しいです。CSSは、M&Sのモバイルサイトのメニューを絶対に配置しました。

私はM & Sさんのモバイルサイトを見ています。 Chromeのhttp://www.marksandspencer.comにアクセスした場合は、開発ツールを開き、端末ツールバーを使用して、携帯端末に表示されるようにします。

メニューはnavの中にdivのシリーズです。 divposition: absolute;ですが、内容が下部で途切れることはなく、ページがフッターの下部を過ぎてもメニューの高さに拡大されます。

明らかに要素を配置すると、通常の流れから絶対的に取り除かれるため、フッターの下部で切り取られます。

これを達成するためにどのように管理しているのか誰にでも分かりますか?つまり、彼らの絶対的な位置はdivである。 heightプロパティの手動設定はどこにも表示されません。

更新

し、「男性」を服 "をクリックし、メニューを開き、およそ500pxなどにビューポートの幅を設定し、ホームページに移動し、効果を確認します。これにより、メニューの内容がページの内容より高くなります。

divをクラスmcp-nav-primary__submenu-container is-activeで見ると、それはposition: absolute;です。

誰かが私のためにコードを書くことを求めていません。

誰でもM &がこのような効果をどのように達成したのか分かりますか?

+0

これは少なくとも自分でコード化することをお勧めします。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします(http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻り、あなたが試したことを説明してください。 –

+0

すべてのページで、ページをメニューよりも上にしてみましたので、何も切り捨てられませんでした。例がありますか? –

+0

@Paulie_Dあなたを修正することを許可します。私は他の人に私のためのコードを書くよう求めているわけではありません。私の質問への答えは、まったくコードを関与させる必要はありません(リンク先のコードとまったく同じです)。私の質問は、M&Sが何かを達成する方法であり、「方法Xを適用する」という完全に良い答えかもしれません。私は方法Xを研究することができました。私は本当に答えに興味があり、正直なところ、他者もそうであると思っています。それはSOがすべてについてです。何人かの人々がコードなしの質問を見ているような気がして、納得させる方法を見つけたいと思うことがよくあります。 –

答えて

1

あなたは毎日何か新しいことを学びます。明らかにこれを達成するために何もする必要はありません。ウィンドウは単独で拡大します。しかし、bodyとhtmlの高さは拡大しないことに注意してください。そして体の上にoverflow: hiddenをセットすると、期待通りにカットされます。

これを参照してください。https://jsfiddle.net/uhqtk13a/

+0

面白いです、私はあなたがこれを投稿したのと同時に自分のウェブサイトを見ていて、ただ私の頭の中で同じ結論に達していました。ご協力いただきありがとうございます。今日は何か新しいことを学びました。 –

関連する問題