2

私はさまざまなページでスティッキーコードを試してきましたが、私のページが半分まともなように見える最も近いコードは、cssstickyfooterのものです。

私は数ヶ月前に、隣人の娘のために制作することを目的としたプロジェクトを開始しました。私は大学のコースでモジュールのウェブサイトを作成する必要がありました、そしてこの考えは新しいビジネスの所有者の父によって私にもたらされました。それで、私はこのサイトを作成し、講師に提出しました（多くの視覚的な欠陥とおそらく多くの役に立たないコード）：IrishBaublesのWebサイト

私が現在抱えている主な問題は、フッターがページの途中で立ち往生していることです（たとえば、ビジネスページを参照してください）。私はそれをかなり待ちきれず、ryan faitのコードレイアウトで作業しようとしましたが、うまくいきませんでした。

これで、コンテンツがプッシュされ、フッターが画面の下部に表示されます。私の友人も固定位置でそれを行うことを提案していますが、コンテンツはフッターの後ろでフォローアップされません。

また、ビジネスページ、ボイラープレート、および流体レイアウトから新しいコードのページを貼り付けました。

明確にすると、両方とも#main cssルールの下で、コンテンツは元に戻りますが、フッターはまだ高すぎます。

私はこのページを例として使用して、最初に残りの部分を進めていきます。

どんな助けでも素晴らしいでしょう！ありがとう！

4

1 に答える 1

2

（私が見つけた）使用するのに最適な方法は、スティッキーフッターにRyanFaitソリューションを使用することです。これは、フッターを除くすべてをラップして、常に下部に配置できるようにすることです。

HTML

<html>
    <head>
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>​

CSS

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

これがJSFiddleの例です。http://jsfiddle.net/EyrKy/3/

更新：レイアウトの例を次に示しますhttp://jsfiddle.net/EyrKy/4/

これがお役に立てば幸いです。

于 2012-12-15T21:50:32.053 に答える