ブラウザウィンドウをカバーする背景画像と、折りたたみの下のヘッダーとフッターを除いたもの

タイトルは少し混乱するかもしれませんが、私は達成する必要があることを説明するために最善を尽くします。基本的に、私は、特定のウェブページへの次の要素を有する：ブラウザウィンドウをカバーする背景画像と、折りたたみの下のヘッダーとフッターを除いたもの

ヘッダー - 常に表示コンテンツ上
コンテンツ - 背景画像全体コンテンツ領域覆う - このキー部
サブのありますフッター - 常にその下に表示されるコンテンツに関する情報
フッター - ウィンドウの高さが一定のサイズであれば見える標準のフッター、それ以外の場合は下にスクロールして見てください

私が上で言及したように、ページの内容部分はおそらく最も難しい部分です。私は、全体の領域をカバーする背景に大きなイメージが必要です。 css-tricksはexcellent guide in the ways to do full page background imagesです。だから私はこれが簡単に達成されることを望んでいる。問題は、ウィンドウが< 720pxの場合、下のフッタを下にして（スクロールする必要があります）、サブフッターを一番下に置く方法です。ウィンドウ> 720pxには、スクロールバーがないサブフッターとフッターの両方が表示されます。

私もコンテンツが（おそらくコンテンツ<div>にスクロールバーが必要か、倍以下のサブフッターとフッター、外出先の両方を作る）する必要がある最小の高さについては、この時点では心配しないだろう。 <720px tall window where the footer needs to be scrolled to

セカンド - 720px背の高い窓<： - ウィンドウフッタがにスクロールする必要が背の高い< 720px

まず：ここ

は私が達成しようとしているもののイメージモックアップです： - すべてが表示されているので、何のスクロールバーを持っていません> 720px背の高い窓最後に enter image description here

：それはフッターを表示するには、下にスクロールされています10

私はjQueryを使用しており、IE6は気にしません。 CSSでこれを達成できますか？動的に調整するためにjQueryを使用する必要がありますか？フルページのバックグラウンドはcss3で簡単に行えます。私は必要なことをするためにcss3またはhtml5を使用しています。

出典

2011-01-25 at.

なぜあなたのためのコンテンツの仕事上の最小の高さではないだろうか？ – nemophrost

サブフッターは常に下には表示されず、フッターがスクリーンの場合は<720pxの場合は折りたたみの直前に、スクリーンの場合は> 720pxの場合は下部に固定されるとは限りません。 –

私は本当に問題が表示されません..高いZインデックスを持つヘッダーが絶対配置されています。通常のコンテンツ領域、そして最後に、あなたのbg画像がすべて同じサイズの場合はフッターがフッターの下にあります。またはbg-imagesも同様に拡大しますか？ 1つのオプションは、@ media-queriesと一緒に行くことです... – tobiasmay

CSS position: fixedは、常に親要素ではなくビューポートからの相対値なので、使用できません。

あなたがする必要があるのは、「コンテンツ」の固定配置された子要素として「サブフット」があることです。これを行うには、Javascriptを使用する必要があります。

何か必要なことをする必要があります。あなたはそれが様々なコンテンツの高さをどのように動作するかを見ることができます#contentのためにCSSでの高さの変数を変更してみてください：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<style> 
    #header { 
     height: 50px; 
     background-color: #ccc; 
     width: 100%; 
     margin-bottom: 10px; 
    } 

    #content { 
     position: relative; 
     height: 1500px; 
     width: 100%; 
     background-color: #ccc; 
    } 

    #subfooter { 
     height: 50px; 
     width: 100%; 
     background-color: #666; 
     position: fixed; 
    } 

    #footer { 
     height: 50px; 
     width: 100%; 
     margin-top: 10px; 
     background-color: #ccc; 
    } 
</style> 
<script> 
    $(document).ready(function(){ 

     $(document).scroll(function() { 
      position_subfooter(); 
     }); 

     var position_subfooter = function() { 
      $("#subfooter").css("bottom", "20px"); 
      if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrollTop() + $("#content").height())) { 
       $("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrollTop() + $("#content").height()) + 20)); 
      } 
     } 
     position_subfooter(); 
    }); 
</script> 
</head> 
<body> 
    <div id="header"> 
     <h1>HEADER</h1> 
    </div> 
    <div id="content"> 

    </div> 
    <div id="subfooter"> 
     <h2>SUB FOOTER</h1> 
    </div> 
    <div id="footer"> 
     <h1>FOOTER</h1> 
    </div> 
</body> 
</html>

出典

2011-01-25 18:46:11

ブラウザウィンドウをカバーする背景画像と、折りたたみの下のヘッダーとフッターを除いたもの

答えて

関連する問題