コンテンツが絶対配置されたフッタを配置する

ウェブページのすべてのコンテンツを含むラッパークラスがあります。問題は、コンテンツが絶対に配置されている場合、私のフッターを食べることです。私は絶対的な位置付けとしてコンテンツを配置する必要があります。コンテンツが絶対配置されたフッタを配置する

コンテンツが絶対であることをフッターが認識していないようです。 HERESに私のコード

<style> 

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

    height: 4em; 
    } 
</style> 
</head> 

<body> 
<div class="wrapper"> 
<img src="activity/Chrysanthemum.jpg" style="z-index: 1; position:absolute; width: 420px; height: 400px; left: 100px;top:260px; "> 
<div class="push"> 
</div> 
</div> 
<div class="footer" >copyrights</div> 
</body>

私はposition:absoluteプロパティを削除することで、画像のスタイルを変更した場合、すべてが正常に見えます。だから私の質問は、絶対配置された内容でどのように底にフッターを置くことができるのですか？

出典

2011-10-23 samach

Googleの「CSS sticky footer」とそれを行うには良い方法があります。 –

彼はMoinをしたようです。私は問題がラッパー上の絶対的なimgの唯一のコンテンツだと思う、私はそれが問題だと思う。 –

私は 'www.cssstickyfooter.com'メソッドを試しましたが、そのntもどちらかを使っていました！絶対的な内容で底部にフッタを付けることさえ可能ですか？ – samach

は、コメントに関する答えを、更新します。
以前の答えで触れたように、この効果は純粋なCSSを使っては達成できません。そこで、私はJavaScriptのアプローチを示します。関連するIDを追加し（Fiddle）、身体の最後に次のコードを追加します。このコードスニペットは、必要に応じてラッパーのサイズを変更します。
注：ページがウィンドウの高さよりも小さい場合、ページラッパーは絶対配置された要素による高さの変更を区別することができないため、完全な高さを取ります。

<script> 
(function(){ 
    var wrapper = document.getElementById("wrapper"); 
    var height = document.documentElement.scrollHeight; 
    wrapper.style.height = height + "px"; 
})(); 
</script>

前の答え：
問題は絶対に-位置付け要素は、その親の高さ/幅に影響を与えていないことに起因します。

コードを修正するには、次のCSSを適用します（関連するCSSのみを表示し、説明的なコメントで後に更新）。 フィドル：あなたはフッターを「食べる」する要素を引き起こし.wrapper用負ボトムマージンを使用していたhttp://jsfiddle.net/4ja2V/

html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0; /* Get rid off the padding */ 
} 
.wrapper { 
    position: relative; /* Necessary to properly deal with absolutely positioned 
          child elements. */ 
    height: 100%; 
    margin: 0 auto 4em; /* So that the content is visible when scrolled down*/ 
} 
.footer { 
    height: 4em; 
    position: fixed; /* Positions your footer at a fixed position in the window*/ 
    bottom: 0; /* At the bottom of the window*/ 
}

。あなたが絶対的に内在する要素を使用している場合、.wrapper要素の実際の幅/高さを得るための信頼できる純粋なCSSメソッドはありません。したがって、外観はposition:fixedです。

フッタは、高さが4emと定義されています。フッタは固定位置に配置されているため（つまり、スクロールするときに要素が動かない）、ラッパー要素の下部に余白を追加する必要があります。

出典

2011-10-23 11:53:21

答えに感謝します。質問が少し誤解を招く場合は、ごめんなさい。私はフィドルを見て、私がしようとしているのは、urのデモで赤いボックスの下に 'copyright'テキストを置くことです。つまり、垂直のスクロールバーがある場合は足元の羽が下になり、スクロールバーがない場合はフッターの羽がビューポートの底になります。 – samach

@Salmanmahmood答えが更新され、JavaScriptメソッドが追加されました。 –

awsum rob !!ありがとうございます.. – samach

は、あなたのフッターの固定絶頂を与え、その後、あなたの絶対的なクラスで、

bottom: heightOfYourFooter + 5px;

出典

2011-10-23 11:29:50 Shaheer

その動作していない... 'bottom'プロパティのようなluksは' top'と 'left'プロパティと一緒に使うと効果がありません – samach

" top "プロパティを削除しようとすると正常に動作しません – Shaheer

コンテンツが絶対配置されたフッタを配置する

答えて

関連する問題