我的頁腳內容不在我滑出的頁腳中

我無法讓我的內容適合我的滑出頁腳。我不知道爲什麼會發生這種情況。我不確定是否必須將其添加到JavaScript中。我的頁腳內容不在我滑出的頁腳中

我將#slideFootercontent添加到開頭，我希望在頁腳中顯示所有內容，但仍然無法正常工作。要清楚，我希望內容與滑出頁腳一起滑出。

我創建了一個codepen.io

<footer> 
    <div class="navbar-fixed-bottom"> 
     <div id="footerSlideContainer"> 
      <div id="footerSlideButton"></div> 
      <div id="footerSlideContent" class="container "> 
       <div class="row"> 
        <div class="container"> 
         <div class="row"> 
          <br> 
          <hr> 
          <div class="col-lg-4"> 
           <h3>Latest Tweets 
           </h3> 
           <div id="example1"></div> 
           <h4>Watch me on Periscope</h4> 
           <a href="https://www.periscope.tv/Erica2385" class="periscope-on-air" data-size="large">@Erica2385</a> 
          </div> 
          <!-- col --> 
          <div class="col-lg-4 border"> 
          </div> 
          <!-- col --> 
          <div class="col-lg-4"> 
           <h3> Subscribe 
           </h3> 
           <p>Subscribe for the latest newsletters and updates</p> 
           <div id="mc_embed_signup" class="mailchimp"> 
            <form action="..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank" novalidate> 
             <div class="form-group"> 
              <input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL" placeholder="Enter email"> 
              <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn__bottom--border mailchimp__btn" data-style="shrink" data-horizontal>   
             </div> 
             <div id="mce-responses" class="clear"> 
              <div class="response" id="mce-error-response" style="display:none"></div> 
              <div class="response" id="mce-success-response" style="display:none"></div> 
             </div> 
             <div class="" style="position: absolute; left: -5000px;"><input type="text" name="..." value=""></div> 
            </form> 
            <span class="form_nospam">No spam</span> 
           </div> 
           <!--End mc_embed_signup--> 
          </div> 
          <!-- col --> 
         </div> 
         <!-- row --> 
        </div> 
        <!-- container --> 
        <hr class="container"> 
        <div class="container"> 
         <a href="https://www.facebook.com/alwayssunny/?fref=ts" target="_blank"><i class="fa fa-facebook fa-2x"></i></a> 
         <a href="https://twitter.com/alwayssunny?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank"><i class="fa fa-twitter fa-2x"></i></a> 
         <a href="https://soundcloud.com/allisondanger/its-always-sunny-in-philadelphia-intro" target="_blank"><i class="fa fa-soundcloud fa-2x"></i></a> 
         <div class="pull-right"> 
          <iframe width="100" height="20" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/231337268&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</footer>

來源

2015-11-07 Erica Rodriguez

如果您清理筆中的格式，則可能會看到問題。 –

你是否提到了除了實際頁腳之外的2個元素？ –

我仍在計算codepen，但是我沒有意識到，如果你點擊'tidy'按鈕，它會清理代碼，我會記住未來。 –

的問題是，你在造型#footerSlideContainer和#footerSlideContent與position:fixed（防止被隱藏的內容）。

將#footerSlideContainer以外的按鈕（#footerSlideButton）移開，以便在容器隱藏時顯示，然後適當地設置其餘的樣式。檢查your modified codepen

請注意，我改變了一些東西在這裏和那裏，因爲你有一些糟糕的選擇器，使一些規則無用，也造成了問題的值。

來源

2015-11-08 04:24:34

我的頁腳內容不在我滑出的頁腳中

回答

相關問題