2

ウェブサイトの携帯電話部分をデザインしています。私は、上：0％、位置：固定、幅：100％、高さ：自動のバナー画像を持っています。携帯電話を横向きにすると、バナー画像が画面の幅にうまく収まります。

ただし、私の問題は、この画像の下にコンテンツを配置することです。たとえば、position:absolute、top:20% の div は、垂直画面のバナーの下に div を表示します。残念ながら、画面を横向きにすると、画像が拡大され、div が覆われます。任意の時点で画像の高さを取得し、それに応じてトップ パーセンテージを調整できる CSS ソリューションはありますか?

編集：私はjavascriptソリューションにもオープンです:)ありがとう。

4

1 に答える 1

1

ここにそれを行う1つの方法があります。

たとえば、これが HTML の場合:

<div class="header">
    <img src="http://www.placekitten.com/400/100">
</div>
<div class="main">Some content...</div>

次の CSS を使用して、ヘッダーを固定配置し、メイン ブロックを絶対配置することができます。

.header {
    position: fixed;
    top: 0px;
    left: 10px;
    right: 10px;
    border: 1px dotted blue;
}
.header img {
    width: 100%;
    vertical-align: top;
}
.main {
    border: 1px solid blue;
    position: absolute;
    top: 147px;
    left: 10px;
}

ウィンドウのサイズが変更されたときにブロックを自動的に再配置する.mainには、次の jQuery を使用できます。

function fixMainTop() {
    $(".main").css({
        "top": $(".header").outerHeight()
    });
}

fixMainTop();

$(window).resize(function () {fixMainTop();});

ページの読み込み時にを呼び出し、fixMainTop()ウィンドウ サイズが変更されるたびに呼び出します。

ただし、この$resize機能により画面が少しビクビクしてしまうことがありますが、jQueryを使った多くのWebサイトは同じ挙動を示しているので、それは許容できると思います。

デモ フィドル: http://jsfiddle.net/audetwebdesign/spxCj/

PS

Web サイトの幅が固定されている場合、アクションは必要ないかもしれませんが、.resizeどのように実行できるかを確認するのは良いことです。

于 2013-06-16T12:08:02.933 に答える