5

編集2：

コードにエラーがあり、フッターがページの下部に貼り付けられませんでした。私のコードは次のようになりました。

<div id="footer">
 <div id="copyright-bg" class="container">
  <div class="row">
   <div class="twelvecol">
    <p class="copyright-text">Lorum Ipsum</p>
</div>
</div>
</div>
</div>

<div id="footer">これらのCSSプロパティを削除してに移動するid="copyright-bg"と、下部に適切に貼り付けられ始めました。しかし今、別の問題が発生しています！不要なスクロールバーができました！これは、何が起こっているのかを理解しようとするためのコードが最も少ないフィドルです。グラデーションの可能性があると思いましたが、コードを無地の背景に変更しても、スクロールバーが表示されたままでした。

注：ChromeとFirefoxでテストしました。

編集：

Webサイトの指示に従ってCSSスティッキーフッターを使用しようとしました。

私のCSS（？）に競合があると思いますが、これはページのフィドルです。

私はこのウェブサイトが提案したことも試みました、そしてそれが技術的に機能している間、それはスクロールバーを作成します！できればそれは避けたいと思います。

元の質問

ページで作業していますが、ページにコンテンツがあまりない場合（つまり、ページのスクロールバーがない場合）、著作権コンテナの下に黒いバーが残ります。

これがスクリーンショットです：

スクリーンショット

注：この単語Doneがブラウザの下部にある場合、矢印は黒いバーを指しています。

バーを削除するためにいくつかのことを試みました。bodyタグに追加height: 100%;すると、背景のグラデーションが表示され、ページの下部に表示されますが、見栄えがよくありません。height: 100%次に、著作権コンテナに追加しようとしました。これにより、灰色の領域が下に伸び、過剰な空きスペースとスクロールバーが発生しました。私は要素を絶対的に配置しようとしましたが、それは他のいくつかの問題を引き起こし、絶対的に配置することを避けたいと思います。

黒いバーを削除するにはどうすればよいですか？（できればCSSだけを使用しますが、jQuery / Javascriptを使用する回答を受け入れます）

コード：

HTML：

<!-- Body Content Is Here -->
<div id="copyright-bg" class="container">
<div class="row">
<div class="twelvecol">
    <p class="copyright-text">Ipsum</p>
</div>
</div>
</div>

CSS：

html, body{
font-size:1em;
font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
line-height:1.438em;
color:#222;
    margin: 0;
    padding: 0;
    text-align: justify;
    background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%);
    /* Vendor Specific Background Gradients... */
}

#copyright-bg{
margin-top:1.875em;
background: none repeat scroll 0 0 #666666;
    border-top: 5px solid #E31836;
padding:1.250em;
}

.container {
    padding-left: 20px;
    padding-right: 20px;
}

.row {
    width: 100%;
    max-width: 1140px;
    min-width: 755px;
    margin: 0 auto;
    overflow: hidden;
 }

.row .twelvecol {
    width: 100%;
    float: left;
 }
4

2 に答える 2

4

複数の解決策（RyanFaitのフッターやCSSSticky Footer（このリンクは壊れています。代わりにこれを参照してください）など）を試した場合は、額面よりも大きな問題があると思います。これらの2つの例は、時の試練を証明していますが、それでもページの下部に貼り付くフッターを作成するために最も一般的に使用される方法です。コードをバッシングしているわけではありませんが、作成しているページを最初からやり直して、最初の実装をスティッキーフッターにすることをお勧めします。そこから、視覚的なスタイルをコピーして貼り付けることができるはずです。それが再び失敗した場合は、コードの原因となる行がわかります。

編集：

インデントがないために読みづらくなったため、コードを少し編集する必要がありました。 これが新しいjsFiddleです。 私が変更したのはいくつかのことでした。CSSコードの先頭に追加されたものは次のとおりです。

* {margin:0;padding:0;} 
html, body {height: 100%;}

#content-wrap {min-height: 100%;}

これらの行は、コードを機能させるために100％必要です。すべての要素でワイルドカード（*）をリセットする必要があるだけでなく、画面の高さ全体を占めるようにドキュメント（ html）と本文（ ）に指示する必要があります。body元のCSSにあったかどうかは覚えていませんが、100％にする必要があります#content-wrap。min-height

検索したところ、フッターの高さは実際には180ピクセルではなく、100ピクセルであることがわかりました。 これが最後のjsFiddleです。 また、フッターを固定するための最終的なコードは次のとおりです。

#main {overflow:auto;
    padding-bottom: 100px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear:both;}

このコードを適用すると、フッターが下部に貼り付けられることがわかります（ダクトテープなしで貼り付けられます）。お役に立てれば！

于 2012-09-17T01:49:14.983 に答える
2

スティッキーフッターコードの大部分が私のページに問題を引き起こしているようです。この問題を回避するために、次のコードを使用しています。

HTML

<body>
 <div id="page-content">
   <header> 
     <!-- Header Content Goes Here --> 
   </header> 

     <!-- Page Content Goes Here --> 

   <footer>
     <!-- Footer Content Goes Here --> 
   </footer>

 </div>
</body>

JS

$(function() {
   var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
 $("#page-content").css("min-height",height+"px");
});

これは、ページの高さを計算し、ページの最小の高さを設定して、フッターを下部に貼り付けることです。それは美しく動作します。

注：私はHTML5を使用しています。

于 2012-10-04T22:30:29.660 に答える