web-dev-qa-db-ja.com

水平にスクロールするサイトのウィンドウの下部にフッターを保持する

私は完全に水平なスクロールサイトを持っています、

TopNav（固定位置）

ナビ（固定位置）

コンテンツ（横スクロール）

フッター（固定位置）

すべてがうまく機能しているように見えますが、問題は、コンテンツが水平方向にスクロールするのに十分な大きさの場合、フッターが水平スクロールバーの後ろに配置されるため、いくつかのページで#footer {bottom：16px}または水平方向のスクロールバーを考慮に入れるためです。

私が問題を抱えているのは、異なるモニター解像度です。明らかに、コンテンツは水平方向にスクロールするか、ウィンドウサイズに基づいてスクロールしません。フッターを下部（または水平スクロールバーの上）に保つ方法はありますか？解像度やウィンドウサイズは重要ではありませんか？

htmlcssscrollsticky-footer
13
Brandon

多くの試行錯誤を繰り返した結果、私はこれが常に下にあるフッターの最善の解決策であることがわかりました。

HTML：

<div class="footer">

    <div class="footer_contents"></div>

</div>

CSS：

.footer {

    height:24px; // Replace with the height your footer should be
    width: 100%; // Don't change
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    position: fixed;
    bottom: 0pt;
    left: 0pt;

}   

.footer_contents {

    height:24px; // Replace with the height your footer should be
    width: 1000px; // Visible width of footer
    margin:auto;

}
31
Gerben Van Dijk
<div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
}

そして、IE 6およびIE 5.5の場合の1つの単純なCSSルール：

#container {
    height:100%;
}
1
Dennis

私には2つの可能性があります。

1番目のオプションボディに常にスクロールバーを表示するように強制します。しかし、これは奇妙に見えるかもしれません。

body { overflow-x: scroll; }

2番目のオプションコンテンツコンテナーを常にフッターの上に置きます。これは、フッターの高さが固定されている場合に可能です。次に、フッターの上にスクロールバーが表示されます。

<div id="contentWrapper">
    <div id="content">Here comes your content</div>
</div>

そしてここで私が今説明するCSS

body, html {
    height: 100%;
    overflow: hidden;
}

#contentWrapper {
    overflow-x:auto;
    overflow-y: hidden;
    height: 100%;
    margin-top: -16px; // add the footer height
}

#content {
    padding-top: 16px; // add the footer height
    width: 6000px;
}

#contentWrapperは、スクロールバーの高さとフッターの高さにプラスのマージンが必要です。 #contentは上部のパディングと同じ値にする必要があるため、上部のコンテンツがページの外に出ることはありません。

0
DanielB

私の最高のアイデアは、独自のスクロール可能なdivの一部として幅広いコンテンツを含めることです。フッターはコンテンツの下部の場所にとどまり、常に中央に表示されます。

スクロールバーをフッターの上に配置したくない場合は、divと一部のcssを使って空のdivをフッターのサイズの下に配置し、実際のフッターを上部にするなど、何かおかしいことができます。 （フッターの高さ）

0
rk1s