固定フッター、またはむしろ：コンテンツがフッターに伸びない

私はページ上に貼り付いたフッターが欲しいので、this oneが私のために働くようにしました。すべてがうまくいっていますが、実際はそうではありません。固定フッター、またはむしろ：コンテンツがフッターに伸びない

問題は、フッターの上にあるコンテンツをすべて下に伸ばしたいと思っていたことです。今すぐメインのコンテンツを含むボックスは、ボックスのテキストの直後で終了し、フッターとコンテンツの間に大きなスペースがあります。私が欲しいのは、メインコンテンツの背景をフッターに引き伸ばすことです！私の美しい画像を見てください！

footerproblem

これは私がHTMLで今持っているものです。私は100％にメインの分の高さを設定しようとした

html { 
    height: 100%; } 

body { 
    height: 100%;} 

/* wrap */ 
#wrap { 
    min-height: 100%; } 

/* main */ 
#main { 
    background-color: #43145c; 
    overflow: auto; 
    padding-bottom: 50px; } 

#main-content { 
    width: 720px; 
    margin: auto; 
    background-color: #643280; 
    padding-top: 20px; } 

#footer { 
    position: relative; 
    margin-top: -50px; 
    height: 50px; 
    clear: both; 
    background: red; }

が、のdidn：

<div id="wrap"> 
    <!-- start header --> 
    <div id="header"> 
     <div id="header-content"> 
     </div> 
    </div> 
    <!-- end header --> 

    <!-- start main --> 
    <div id="main"> 
    <div id="main-content"> 
    </div> 
    </div> 
    <!-- end main --> 
</div> 
<!-- start footer --> 
<div id="footer"> 
</div>

とCSSで仕事はありません。メインコンテンツの背景色をフッターにしたいのは、ボディとメインボックスとは異なるからです。

意味がありますか？誰も助けることができますか？

出典

2012-02-21 stinaq

メインの最小高さを設定すると、親の高さが設定されていないため、うまく動作しません。 –

ことは、これを試してみてください：

はこれでスタイルシートであなたのHTMLおよびBODYスタイルを置き換えます

html,body {height: 100%;}

次にこれであなたの "ラッパー" を置き換えます

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

・ホープそれは助ける。

出典

2012-02-21 21:27:16

いいえ、実際は.. =（どういうわけか、メインボックスはヘッダーとフッターの間のスペースの最小の高さを取得する必要がありますが、どう考えているのですか？ – stinaq

@StinaQ：フッターの最小高さ： MAIN divと指定されたものに対して私の答えを適用してください。それを試してみてください。それ以外の場合は失敗します。http://ryanfait.com/sticky-footer/ –

この

HTMLを試してみてください

<body> 
    <div id="wrap"> 
    <!-- start header --> 
    <div id="header"> 
     <div id="header-content"> 
     </div> 
    </div> 
    <!-- end header --> 

    <!-- start main --> 
    <div id="main"> 
     <div id="main-content"> 
     </div> 
    </div> 
    <!-- end main --> 

    <div class="push"></div> 
    </div> 

    <!-- start footer --> 
    <div id="footer"> 
    </div> 
</body>

CSS

 * { 
      margin: 0; 
      padding: 0; 
     } 

     html, 
     body { 
      height: 100%; 
     } 

     /* wrap */ 
     #wrap { 
      background: green; 
      height: auto !important; 
      margin: 0 auto; 
     } 

     #wrap, 
     #main, 
     #main-content { 
      margin-bottom: -50px; 
      min-height: 100%; 
      height: 100%; 

     } 

     /* main */ 
     #main { 
      background-color: #43145c; 
     } 

     #main-content { 
      width: 720px; 
      margin: 0 auto; 
      background-color: #643280; 
     } 

     .push, #footer { 
      height: 50px; 
     } 

     #footer { 
      position: relative; 
      background: red; 
     }

出典

2012-02-21 21:51:17 mikos

私は、これは6ヶ月前に頼まれたけど、私は非常にこの問題の解決策を探してきました他の人がアーカイブされていたソリューションの恩恵を受けることができるようになりました。あなたは何とかメインボックスがヘッダーとフッターの間のスペースの最小高さを取得する必要があると言ったときには、あなたはスポットにいました。

残念ながら、これは純粋なCSSでどうやって行うことができるのかわかりませんが、javascriptでは非常に簡単ですが、その解決策は必ずしも実行可能なわけではなく、コード分離という面では面倒です。良いことは、あなたが何をする必要があるかに応じて、あなたが採用できるCSSハックがあるということです。

私がしたことは、ヘッダーの下からフッターの上に本質的に伸びたボディの下に絶対配置された要素を追加することでした。この方法では、この#divBowowBodyにこの問題をふりかえることができました（この解決法は私の口に苦い味を残すが）解決される。

さらに、コンテンツ部門の周りに枠線を追加し、コンテンツが小さくてもフッターまで拡張したいと思っていたら、あなたはうんざりです（実際はそうではありませんが、 http://jsfiddle.net/qHAxG/ より明確に何が起こっているのか確認するために、水平方向の結果]セクションを展開します：あなたがここにアクションのコードを見ることができ、これが実行可能にする2）、あなたが背景を追加したり、グラデーションに期待していた場合にのみ動作しますので、など

に。

出典

2012-09-02 08:41:48 RedHydra

THISデモをご覧ください。デモ：おそらく使用の可能性があります。あなたが背景色を持つdivを下に伸ばしたいと思うようです。しかし、固定フッタの問題は、コンテンツがビューポートを越えているときに、途中で止まってしまうことです。だから、いつどのように行うのか知るには、ある程度の距離（コンテンツの高さ）が必要です。もしその高さが実際の内容で指定されていなければ... 100％は本当にそのトリックをやろうとはしません。「粘着性のある」フッターは実際には機能しません...スクリーンから離れてしまうからです。それは本当に何の100％ですか？

...うまくいけば、そのリンクを、この全体のことは、一年のための私をイライラしている...しかし、私はいつも、私はそれは私が望むように機能するように得ることができないならば、それは私も望むように見えるようにする方法を見つけます上記のデモは、パズルに別の部分を貸すかもしれません。がんばろう！

出典

2012-10-22 00:30:08 sheriffderek

固定フッター、またはむしろ：コンテンツがフッターに伸びない

答えて

関連する問題