1

フッターの幅を 100% にしたり、ブラウザーの下部まで 100% 拡張したりするための情報がたくさんあります。

私の問題は少し異なります。

私のサイトのすべてのコンテンツは、最大幅のコンテナにラップされています。ただし、クライアントはフッターの幅を 100% にしたいと考えており、ページ情報が短い場合、フッターはページの下部まで拡大する必要があります。

そのため、フッターをメイン コンテナーの外側に配置して、ページの幅いっぱいに表示できるようにする必要があります。しかし、これは私が使用できないことを意味します

html , body {height:100%;}

フッターを 100% 高くしても、メイン コンテナーの外側にあるため役に立ちません。

では、メイン コンテナーを無視して、ページが短すぎて画面の上から下までいっぱいにならない場合、スタンドアロンの 100% 幅のフッターにブラウザーの一番下までページをいっぱいにするように指示するにはどうすればよいでしょうか? フッターで下部のギャップを埋めるにはどうすればよいですか?

コードの簡単なコピーを次に示します。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style>

    #main {
        height: 100px;
        max-width: 900px;
        background-color: blue;
        margin: auto;
    }

    footer {
        width: 100%;
        background-color: lightblue;
        color: white;
    }

</style>

</head>

<body>

        <div id="main">
        </div>

        <footer>
            Footer content
        </footer>

</body>
</html>

水色のフッターを一番下まで表示するにはどうすればよいですか?

また、フッターを下部に貼り付けたくないことに注意してください。ページの下部にある場所からブラウザーの下部まで拡張する必要があります。

4

1 に答える 1

0

jsFiddle デモ

//css //
footer {
    width: 100%;
    background-color: lightblue;
    position:absolute;
    color: white;
    bottom:0;
}

// jQuery //
$(function () {
    var mainHt = $('#main').height();
    $('footer').css('top', mainHt);
});
于 2013-08-13T16:42:22.907 に答える