0

ウェブサイト... http：//dev.rapweb.co.uk/londonplace/research.htm

問題...ブラウザの高さが垂直スクロールバーを引き起こすほど低い場合、下にスクロールすると空白が表示され、赤いパネルのテキストの下部が表示されません。

解決策を試しました...赤いパネルのオーバーフロー自動により、ページ内のスクロールバーが発生します。それは絶対的なポジショニングによるものだと思います。

その他のアイデア...背景がカバーに設定され、下が揃えられているため、当初の計画を達成できない可能性があることに気付きました。そこで、ヘッダーの後ろにテキストをスクロールさせることを検討しましたが、ブラウザーで問題が発生しました。幅が十分に小さかったため、水平スクロールバーが発生しました。これは、テキストが赤いパネルと灰色の領域の外側にスクロールできなくなったためです。

どんな助けでも大歓迎です。

4

1 に答える 1

0

これにより、ストリップが下に続き、画像が下に拡張されます。

これを追加：

/* These 2 made the red strip not behave funny with <p> margins */

#redStripContent p:first-child {
    margin-top: 0;
    padding-top: 1em;
}

#redStripContent p:last-child {
    margin-bottom: 0;
    padding-bottom: 1em;
}

/* This extends the size of red strip */

#redStrip {
    position: relative; /* was absolute */
}

これを削除します：

/* This removes the fixed bottom on main image area */

#mainImageArea {
    bottom: 0px;
}

コメントで言及した他のページの問題については、min-height:100% と負のマージンを組み合わせて試してみることをお勧めします。たとえば、これを追加してみてください：

#mainImageArea {
    min-height: 100%;
    margin-top: -110px;
    z-index: -1;
}
于 2013-02-26T11:39:05.290 に答える