0

このスティッキー フッター テンプレートを作成しましたが、コンテンツ div の最小高さを 100% にしたいと考えています。問題は、それを行うと、ヘッダーの高さ + フッターの高さの余分な高さで、フッターの下に拡張されることです。どうすればこれを修正できますか? スティッキー フッターと同様に、短いコンテンツと長いコンテンツもサポートする必要があります。jQuery を使用する必要がありますか? 初心者なのでKISSお願いします。

HTML

    <body>
    <form id="form1" runat="server">
        <div class="wrapper">
            <div class="header"></div>
            <div class="content">

                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>

            </div>
            <div class="footer"></div>
        </div>
    </form>
</body>

CSS

html, body {
    min-height:100%;
    height:100%;
}

#form1 {
    min-height:100%;
    height:100%;
    margin:0;
}

.wrapper {
   min-height:100%;
   height:100%;
   position:relative;
}
.header {
   background:#990066;
   height:100px;
}
.content {
   background:#ffffcc;
   padding-bottom:100px;   /* Height of the footer */
   min-height: 100%;
   width: 1120px;
   margin: 0 auto;
}
.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:100px;   /* Height of the footer */
   background:#333;
}
4

3 に答える 3

2 
.content {
    min-height: calc(100% - 100px - 100px);   /* minus header-height minus footer-height */
}

コンテンツ要素の最小の高さは、100% から 100px (ヘッダーの高さ) と 100px (フッターの高さ) を差し引いた値に設定されます。CSS 関数を使用しcalc()て、ブラウザーは正確な高さを計算します。これは、ブラウザ間の互換性の点で優れています。

.content {
    min-height: -webkit-calc(100% - 100px - 100px);
    min-height: -moz-calc(100% - 100px - 100px);
    min-height: calc(100% - 100px - 100px);
}
于 2013-08-26T22:41:55.443 に答える
0

以下のようにcssで.footerクラスの位置を修正するだけです

.footer {
  position:fixed;
  bottom:0;
  width:100%;
  height:100px;   /* Height of the footer */
  background:#333;
}
于 2013-03-28T11:30:30.820 に答える