2

さて、私は小さなウェブサイトに取り組んでいます。

しかし、私は固定位置に問題があります。

私のヘッダーは幅770pxです。それにはいくつかの要素が含まれています。

位置: 固定; 非常にうまく動作しますが、ウェブサイトのサイズを別の画面サイズに変更すると、固定要素 (ヘッダー) の幅が 640x480 のように完全に表示されなくなります。

スクロール用に固定したいのですが、ユーザーが小さな画面を使用していて完全に表示できない場合は、幅が完全に見えるようにしたいです。

これはワードプレスのテーマの例です。

http://dvl-den.net/

私の小さなプロジェクトにも同じ問題があります。その Web サイトを 640x480 (ブラウザのサイズを変更) で開いてみると、私の問題が表示されます。

前もって感謝します。

4

3 に答える 3

1

CSSのみのプロパティを使用したソリューションはないと思います。position: absolute;CSSを使って、JavaScript（私の例ではjQueryが必要）を次のように試してみます。

jQuery(function($) { // document ready
    var $win = $(window),
        handler = function() {
            // try not to overload browser, creating a throttle
            var throttle,
                throttleFn = function() {
                    // this is what happens on window resize
                    $('#header').css({
                        top: $win.scrollTop()
                    });
                };
            return function() {
                clearTimeout(throttle);
                throttle = setTimeout(throttleFn, 100);
            };
    };
    $win.resize(handler());
});

モバイルでは実際には「クール」には機能しませんが、Webアプリの固定ヘッダー（ネイティブとは異なります）にモバイルの問題があることは広く知られています。必要に応じて、JSFiddleの例で更新できます。

http://jsfiddle.net/qaKT7/でデモを確認してください（100の値を試して、より良いエクスペリエンスを得ることができます。また、見栄えを良くする.animate()代わりに使用することもできます）.css()

于 2012-07-31T02:22:54.553 に答える
1

あげてみて

min-width:770px;

または試してみてくださいmedia queries

于 2012-07-31T02:37:24.317 に答える
0

次の 2 つの方法があると思います。

  1. 幅「770px」をパーセンテージに変更します。
  2. 画面のピクセルの高さを検出し、これに応じて幅を調整します。
于 2012-07-31T05:35:19.457 に答える