14

完全に水平方向のスクロールサイトがあります。

TopNav（固定位置）

ナビゲーション（固定位置）

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

フッター（固定位置）

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

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

4

4 に答える 4

32

多くの試行錯誤の末、私はこれが常にボトムフッターに最適なソリューションであることに気づきました。

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;

}
于 2011-06-05T23:31:23.123 に答える
2 
<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;
}

そして、IE6とIE5.5の1つの簡単なCSSルール：

#container {
    height:100%;
}
于 2012-11-10T09:15:09.180 に答える
0

私の最善のアイデアは、独自のスクロール可能なdivの一部として幅広いコンテンツを用意することです。その後、フッターはコンテンツの下部にある場所にとどまり、常に中央に配置されているように見えます。

スクロールバーをフッターの上に配置したくない場合は、divといくつかのcssを使用して、幅の広いコンテンツの下にフッターのサイズの空のdivを配置し、実際のフッターに上部を持たせるなど、何か凝ったことを行うことができます。 （フッターの高さ）

于 2011-05-25T17:07:18.583 に答える
0

私が見る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上部のパディングと同じ値である必要があるため、上部のコンテンツがページの外に出ることはありません。

于 2011-05-25T16:43:43.723 に答える