0

http://themorpheustech.com/test/test1.php

リンク先へどうぞ。

メニューは固定位置です。下にスクロールすると表示されます。これがまさに私が望んでいることです。

そして、メニューがたくさんあり、100% の幅を持つ Fixed menuWrapper と固定幅 (1240px) を持つ Wrapper 内の div が 19 個のメニューを持っていることがわかります。

さて、問題は、Web サイトを低解像度のモニター (1024px モニター) で表示したときです。テスト用に、ブラウザー ウィンドウのサイズを変更するだけです。すべてが正常に機能しています。固定されたメイン メニューを意味します。しかし問題は、メニュー 18 まで表示されることです。ブラウザ ウィンドウの下部にある水平スクロール バーをスクロールすると、ウェブサイトのコンテンツにメニュー以外のすべてが表示されますか? メニュー18までのショーです。

CSSまたはJqueryでこれを解決する必要があります。

私が使用したコード：

<style type="text/css">
html, body {
    margin:0px;
    padding:0px;
}
#menuWrapper {
    position:fixed;
    width:100%;
    height:80px;
    background-color:#999;
}
#menu {
    position:relative;
    width:1240px;
    margin:0 auto;
    height:80px;
    white-space: nowrap;
}
#content {
    padding-top:90px;
    width:1240px;
    background-color:#F3F3F3;
    margin:0 auto;
}
</style>

<div id="menuWrapper">
    <div id="menu">
        Menu 1 | 
        Menu 2 | 
        Menu 3 | 
        Menu 4 | 
        Menu 5 | 
        Menu 6 | 
        Menu 7 | 
        Menu 8 | 
        Menu 9 | 
        Menu 10 | 
        Menu 11 | 
        Menu 12 | 
        Menu 13 | 
        Menu 14 | 
        Menu 15 | 
        Menu 16 | 
        Menu 17 | 
        Menu 18 | 
        Menu 19 
    </div>
</div>
<div id="content">
    Website Content<br />
    Website Content<br />
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
4

3 に答える 3

1

問題は、＃menuがブラウザウィンドウよりも幅が広く、水平スクロールバーが表示されることです。overflow: autoまたはを使用するoverflow:hiddenと最適ではありません。最初の結果は水平スクロールバーになり、2番目の方法ではメニュー項目がユーザーから非表示になるためです。

これは、次のことを行うcodepenです。

  1. 1240pxより小さい（またはメディアクエリサポートなしの）ブラウザウィンドウ（ビューポート）は、水平スクロールバーなしでメニュー項目を折り返すことができるバージョンのメニューを取得します（「width：1240px」を「min-width：1240px」に置き換えました
  2. 1240pxより大きいビューポート（メディアクエリをサポート）は、完全に固定されたメニュー幅の処理を受けます。

メディアクエリはさまざまな幅で調整する必要があるかもしれませんが、一般的な概念は同じままである必要があります。

reply.jsを使用して、古いブラウザでメディアクエリをサポートできます。

お役に立てば幸いです。

幸運を！

于 2012-10-03T18:52:20.953 に答える
1

問題はまさにあなたが上で述べたことです。「固定幅」は 1240 ピクセルで、画面サイズは 1024 ピクセルです。1240 px 未満の画面に 1240 px の div を表示するには、div が他のコンテンツにオーバーフローしたり、オーバーフローの設定に応じてスクロール バーを介してオーバーフローしたりする必要があります。2つのうちの1つを試すことができます。#menu div の高さを削除して幅を指定すると、コンテンツが折り返されて新しい行に表示されます。または、幅と高さを指定すると、コンテンツがオーバーフローし、スクロール バーが追加されます。この動作がブラウザ間で確実に発生するようにするには、次を追加できます。

#menu { overflow: auto; }

お役に立てれば。

于 2012-10-03T19:00:16.133 に答える
1

固定幅は、意図したことを正確に行っているようです。画面の解像度に関係なく、同じ幅を表示します。別の幅を表示したい場合は、CSS3 メディア クエリhttp://cssmediaqueries.com/を検討してください。代わりに、問題がボックス内のコンテンツのスクロールにある場合は、次のように別の方法で設定できます。

#content { overflow: auto; }
于 2012-10-03T16:46:48.580 に答える