3

ウェブページにフッターを正しく配置するのを手伝ってくれませんか?

私は次のレイアウトを持っています：

ここに画像の説明を入力

これは、フッターの動作を次のようにします。

  • コンテンツが空の場合、フッターはページの下部に配置する必要があります。
  • コンテンツがページの高さを超える場合は、フッターを「押し下げる」必要があります。

ここに私のHTMLがあります:

<html>
    <head>
        <title>@ViewBag.Title</title>
    </head>

<body>

/* This is outside of the container as I want the background 
   to stretch across the top of the webpage */
<div id="menu">
    <div>
       /* This contains an unordered list which is restyled as a series of links.
          The reason it is contained in inside the menu div is because I want this
          content to be centred. /*
    </div>
</div>

<div id="page-container">

        <div id="header">
            <h1>Website title</h1>
        </div>

        /* This is floated to the left of the content area. */
        <div id="content">
            @RenderBody()
        </div>

         /* This is floated to the right of the content area. */
        <div id="sidebar">
            @RenderSection("sidebar", false)
        </div>

</div>

<div id="footer">
    My footer content goes here.
</div>

次の点に注意してください：

  • コンテンツとヘッダーは、「page-container」と呼ばれる「Div」に含まれています。
  • コンテンツは、コンテンツ領域の左右に浮いている 2 つの Div で構成されています。
  • メニューは page-container div の外にあります。これは、メニューの背景をページの上部に広げたいためです (Stackoverflow メニューのように)。

Stackoverflow に同様の質問が多数あり、Google 検索で大量の結果が返されることは承知しています。

私が見つけたサンプルを適応させようとしているときに気付いたのは、それらが通常、私のものと一致しない非常に特殊な html 構造 (例: フッター以外のすべてがコンテナー内にある) に依存していることです。何を試してもうまくいきません (たとえば、コンテンツが空の場合、フッターが画面の境界の下に配置されたり、コンテンツがページを超えた場合にフッターが下に移動したりしません)。

アップデート

ページの下部にフッターを固定することはできますが、コンテンツが展開されたときにフッターが押し下げられません。これは、コンテンツが 2 つのフローティング要素で構成されているためだと思います。

ほとんどの人は、Google で見つけたチュートリアルを教えてくれているようです (既に述べたように、私はこれらのほとんどを読んでおり、既に適応しようとしています)。

これを機能させるには、HTML を再構築する必要があるという結論に達しました。私の質問のポイントは、既に持っている HTML でこれを行うにはどうすればよいかということでした。懸念事項の分離については以上です。

4

6 に答える 6

2

簡単なグーグル検索はあなたが役に立つと思ういくつかのリンクを私に与えました。

http://www.cssstickyfooter.com/

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

私は最初のものに固執しますが、どちらもあなたが望むことをするべきです。

于 2012-08-14T15:26:10.427 に答える
2

私はフィドルを作りました: http://jsfiddle.net/karlroos/ZVkYC/ (よく整理されていない CSS でごめんなさい)

見てください。min-height: 100%;古いバージョンの IE では、おそらく JavaScript を使用して回避策を講じる必要があります。

于 2012-08-14T15:29:38.573 に答える
0

投稿の編集で述べたように、HTMLを少し変更する必要がありました。

<body>
    <div id="page-container" >
        <div id="menu">
            <div>

            </div>
        </div>

        <div id="layout-container">

            <div id="header">
                <h1>Website title</h1>
            </div>

            <div id="content">
                @RenderBody()
            </div>

            <div id="sidebar">
                @RenderSection("sidebar", false)
            </div>

        </div>
    </div>

<div id="footer">

</div>

私のCSSはここにあるCSSに基づいています（この同じリンクは数人の人によって投稿されましたが、とにかくすでにこれを使用していました！）

このソリューションは約99％効果的です。コンテンツ領域が空の場合、フッターはページの下部に固定され、コンテンツが画面より大きくなると押し下げられますが、ページの高さがオフになっているように見えるため、永続的なスクロールバーがあります（マウスホイールのスクロールを動かすページを1ピクセル上下に移動します）。

私はこれまでこれを取り除くことができなかったので、他の誰かが私を正しい方向に向けることができない限り、これを完全な解決策として惜しみなく受け入れています。

アップデート

1ピクセルのオフセットは、フッターの上部の境界が1ピクセルであることが原因のようです。これを考慮してCSSを調整しただけで、コンテンツが画面全体に表示されなくなるとスクロールバーが消えます。

#footer {
    margin-top: -151px;
    height: 150px;
}
于 2012-08-14T19:24:15.933 に答える
0

CSSを編集して、次のようなものを含めてみてください。

#footer {
width: 710px;
height: 50px;
margin: 0 auto;
padding: 40px 0 0 0;
}

#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}

#footer a {
text-decoration: underline;
}

#footer a:hover {
text-decoration: none;
}

次に、フッターでそれを呼び出します。

于 2012-08-14T15:25:45.973 に答える
0

ボディをposition:relativeに、フッターを にposition:absolute設定してみましたbottom:0か?

于 2012-08-14T15:19:57.570 に答える
0

div-s をラッパーでラップします。

#wrapper {
  width:100%;
  height:500px;
  background:#ccc;
  margin:auto;
  position:relative;
}

フッターに次の CSS を使用します。

#footer {
   width: 100%;
   height: 80px;
   background-color: #ccc;
   position:absolute;
   bottom: 0;
}
于 2012-08-14T15:16:01.513 に答える