2

最近作成したいくつかのサイトを、ホバリングに反応して自分のサイトにリンクする画像でブランド化しています。クライアントのサイトの右下隅にロゴを絶対に配置するjQuery追加関数を使用してマークアップとCSSを動的に挿入していますが、ほとんどの部分でうまく機能しています。ただし、2つの異なるシナリオに対応するために、そのポジショニングを強化する必要があり、かなり困惑しています。

サイトの要素がウィンドウの下部に到達しない場合は、右下隅にロゴを配置する必要があります。これは現在行われていることです。これは素晴らしい。

要素がページの下部またはそれを超えて到達し、スクロールバーを強制する場合は、ロゴを最も到達度の低いDIVの下部から40ピクセル下に配置し、ページの右下隅に配置します（まるでページの一部であるかのように）絶対位置ではなく、通常のドキュメントフロー）。これは私が理解できないことです。

4

2 に答える 2

1

この問題を解決する最も簡単な方法は、body タグのすぐ内側に相対的に配置されたコンテナー ブロックを作成することです。次に、ロゴは、ビューポートではなく、そのコンテナーに対して絶対的に配置されます。次に、ページを押し下げるのに十分なコンテンツがない場合にページの下部に表示されるように、少し作業を行う必要があります。

あなたがしたいことは、CSSのスティッキーフッターにほぼ似ています: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

于 2009-08-07T19:04:25.843 に答える
0

できることの 1 つは、スクロールバーがないときにビューポートの高さを 100% にすることです。スクロールバーがある場合、高さはビューポートよりも長くなります。

利点は、ページ上のすべてのコンテンツを含むコンテナー div を使用できることです。その div に相対位置を指定し、コンテナ div 内でロゴを絶対位置に配置します。

CSSコードは次のとおりです。

html, body {

    height: 100%;

}

#container {

    position: relative;

    min-height: 100%;

    height: 100%;

    voice-family: "\"}\"";

    voice-family: inherit;

    height: auto;

}

html>body #container {

    height: auto;

}
于 2009-08-07T18:30:41.293 に答える