2

Martin Bean と Ryan Fait によって提供されたスティッキー フッターの手法をしばらく使用しましたが、固定位置のサイドバーにスティッキー フッターを配置する必要があることに気付くまでは問題なく機能します。

固定位置のサイドバーはドキュメントには表示されないため、ラッパーのマージンとパディングの設定は効果がありません。サイドバー内に別のインナーラッパーを追加しようとしましたが、役に立ちませんでした。このリクエストに対する純粋な CSS ソリューションがあるかどうかを知りたいですか?

固定位置のサイドバーを使用しなければならない理由は、画面サイズが小さいときにトランジション効果を使用して折りたたむためです。メソッドは StartBootstrap から学習されます。例では simple-sidebar です。

ところで：私はBS3を使用しています

私のサイトの基本的な設定は次のとおりです。

HTML

<div id="wrap">   
  <div id="sidebar-wrapper">
    <div id="inner-wrap">
      <ul id="sidebar-nav">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
    <div id="footer">
      Copyright claim
    </div>  
  </div>
  <div id="main-wrapper">
    Some Content
  </div>
</div>

CSS

html, body {
  height: 100%;
}

#wrap {
    height: 100%;
}

#sidebar-wrapper {
  width: 250px;
  position: fixed;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  padding: 0 auto 50px;
  margin: 0 auto -50px;
}

#inner-wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -50px;
  padding: 0 auto 50px;
  width: 100%; 
}

#sidebar-nav {
  position: relative;
  top: 0px;
  width: 250px;
  margin: 0px;
  padding: 0px;
}

#footer {
  height: 50px;
  position: absolute;
  width: 250px;
}

temp bootplyを作成しました。それが役に立てば幸い。

更新 問題は Bass によって解決されます。どうもありがとう！上記のコードが機能しない原因は、余分な「height: auto !important;」が原因です。親の #sidebar-wrapper で設定します。それを削除すると、すべて正常に動作します。必要に応じて、#footer の position:absolute も削除できます。

4

1 に答える 1

0

サイドバーに追加のラッパーを使用して同じことができるようです：

html

  <!-- Sidebar -->
  <div id="sidebar-wrapper">
   <div id="sidebar-wrapper-wrapper">     
    <ul class="sidebar-nav">
      <li class="sidebar-brand"><a href="#">Start Bootstrap</a></li>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Shortcuts</a></li>
      <li><a href="#">Overview</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div style="background-color:red;height:60px">footer</div>  

  </div>

CSS

#sidebar-wrapper-wrapper {
    height: auto !important;
    margin: 0 auto -60px;
    min-height: 100%;
    padding: 0 0 60px;
}
于 2013-10-21T21:03:14.477 に答える