0

「CSS スティッキー フッター」テクニックを使用して、コンテンツがブラウザー ウィンドウの高さよりも小さい場合は画面の下部にフッターを表示し、コンテンツの高さがブラウザー ウィンドウの高さよりも大きい場合はコンテンツの下にフッターを配置します。ブラウザ ウィンドウの高さ。

これは通常のコンテンツでは問題なく機能しますが、ページを更新せずにコンテンツが変更されるページがあります。(Javascript を使用して のコンテンツを置き換えるか、を からに<div>変更します)。元のページの高さがウィンドウよりも小さく (したがって、フッターが下部にある)、新しいコンテンツによってウィンドウよりも大きくなる状況がある場合、コンテンツはフッターの「後ろ」に配置されます (新しいコンテンツの下のフッター)。<div>display: nonedisplay: block

ブラウザにウィンドウの「サイズを再計算」させ、新しいページ サイズでページ コンテンツをレンダリングさせる方法はありますか?

<html>
<body>
<body>
<div id="wrapper">        
     <div id="header"><!-- some header content here --> </div>     
     <div id="content" class="footer_padding"> <!-- .footer_padding gives room for the sticky footer -->

         <div class="items"><!-- some normal content here which doesn't change, a list of items in my case, which when clicked, some info is displayed below  -->
              <a href="#" onClick="javascript:showInfoPage('longpage');">Show Item Details</a>
         </div>

         <div id="text">
            <div class="iteminfo" id="defaultpage" style="display: block">
                <!-- default content here, height smaller than window height -->
                <p>Hello this is some content.</p> 
            </div> <!-- #defaultpage .iteminfo -->

            <div class="iteminfo" id="longpage" style="display: none">
                <!-- item content here, height larger than window height -->
                <p>This is some long content...</p>
                <p>This is some long content...</p>
                <p>This is some long content...</p> 
            </div> <!-- #defaultpage .iteminfo -->


         </div><!-- #text -->

      <script language="javascript1.5" type="text/javascript">
       function showInfoPage(slug)
       {
         jQuery('.iteminfo').css("display", "none");
         jQuery('#'+slug).css("display", "block");
       }
      </script>

     </div><!-- #content -->
   </div> <!-- #wrapper -->

   <div id="footer">
         <!-- the sticky footer -->
         <p>Hello, I am the footer, I should always be at the bottom</p>
   </div>
</body>
</html>

CSS:

html
{
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;    
}

body
{
  background-color: #ffffff;
  font-size:15px;
  color: #333333;
  text-align:center;    
  width: 100%;
  height: 100%;
  margin: 0px;
}

div#wrapper
{
  width: 100%;
  min-height: 100%; 
}

div#content
{
  margin: 0 0 0 0;
  padding: 0px;
  overflow: hidden;
  display: block;
  position: relative;   
}

.footer_padding
{
  padding-bottom: 40px;
}


 #footer
 {
   position: relative;
   margin-top: -40px;
   text-align: center;
   width: 100%;
   padding: 10px 0px 10px 0px;
   background:#FFFFFF;
   clear: both;
 }

ここでこの問題を示す JSFiddle を作成しました: http://jsfiddle.net/7mUDa/1/

4

2 に答える 2

0

JavaScript を使用してフッターを配置してみてください。2 つのフッターを作成し、別々の div に配置します。

<div id="footer1>
this is my footer.
</div>
<div id="footer2">
this is my footer.
</div>

ご覧のとおり、両方の div のフッターのコンテンツは同じになります。次に、javascript を使用して条件ステートメントを使用し、コンテンツがブラウザー ウィンドウを超えているかどうかを確認します。

$(window).height();

高さを超えない場合は、画面の下部に絶対位置を指定して footer1 を使用し、他のフッターの表示を false のままにします。存在する場合は、コンテンツに対する相対位置で footer2 を使用し、他のフッターの表示設定を false のままにします。

于 2013-10-21T06:08:29.607 に答える
0

次の例では、 内にコンテンツを追加するだけでdiv.page-wrap、フッターが要求どおりに押し下げられるのを確認できます。

HTML

<div class="page-wrap">

  Content!

</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

CSS

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

CodePen のこの例を参照してください。

ヒント:フッターの高さが固定されていない場合、またはレスポンシブにしたい場合は、 の自然な高さに基づいて.site-footer heightとの値を (Javascript を使用して) 計算する必要があります。ブラウザ ウィンドウのサイズが変更されたときに、この値を更新することもできます。または、非 JS ソリューションの場合は、いつでもメディア クエリを使用できます。.page-wrap margin-bottom.site-footer

于 2015-03-23T13:00:56.430 に答える