web-dev-qa-db-ja.com

bootstrap 3.0全身のサイドバー3.0

bootstrap divを取得して全身の長さを取得しようとしています。

これは私がこれまで試したものです： http://jsfiddle.net/bKsad/315/

html, body {
    min-height: 100%
}
.wrap {
    height: 100%
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    min-height:100% !important;
    position:relative;
}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

右の列が長くなるにつれて、サイドバーにも同じことをしてほしい。

responsive-designtwitter-bootstrap-3htmlsidebar
18
black_rabbit

重要なのは、Bootstrap 3：によって提供される「col-md-x」および「col-md-offset-x」スタイルを理解することです。

<div class="container-fluid">
 <div class="row">
  <div class="col-md-3 sidebar">
   Sidebar Content
  </div>
  <div class="col-md-9 col-md-offset-3 content">
   Main Content
  </div>
 </div>
</div>

次に、CSSを使用して、ブレークポイントが整列していることを確認します。特定のニーズに合わせてパディング/マージンを微調整する必要がありますが、オフセットと@mediaブレークポイントはレイアウト全体をかなりうまく処理します。

html, body, .container-fluid, .row {
    height: 100%;
}

.sidebar {
  background-color: #CCCCCC;
}

@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #CCCCCC;
  }
}

実用的なソリューション： http://www.bootply.com/111837

「col-sm-x」または「col-lg-x」を使用する場合は、@ media CSSを対応する最小幅（smでは768px、lgでは1200px）に変更するだけです。 Bootstrap=残りを処理します。

34
pjfamig

絶対位置のdivと少しのjQueryを使用してこれを解決しました。 50pxの固定高さのBootstrap navbarがあります。そのため、コードに50年代が表示されます。トップnavbarがない場合は、これを削除できます。

このソリューションは、あらゆる高さで動的に機能します。

CSS：

.sidebar {
    background-color: #333333;
    position: absolute;
    min-height: calc(100% - 50px);
}

JQuery：

var document_height = $(document).height();
var sidebar = $('.sidebar');
var sidebar_height = sidebar.height();

if (document_height > sidebar_height) {
    sidebar.css('height', document_height - 50);
}

CSSを使用して最小高さを調整するため、背景のちらつきはありません。これにより、通常背景のちらつきを引き起こすjQueryのサイズ変更はページの読み込み時に非表示になります。

2
kjdion84

（すべてのことを何時間も試した後）私のためにそれを動かした唯一のことは

HTML <nav class="col-sm-3 sidebar">

CSS padding-bottom: 100%;

パーセントのパディングは私のためにそれをしました。これで、ページの一番下まで表示されます。

0
Yoko

アプローチ1：ラップdivの最後にstyle = "clear：both"で空のdivを追加しました。 http://jsfiddle.net/34Fc5/1/

アプローチ2： http://jsfiddle.net/34Fc5/ ：

html, body {
    height: 100%;
}
.wrap {
    height: 100%;
    overflow: hidden;
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    height:100% !important;
    position:relative;

}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

「overflow：hidden;」を追加.wrapに変更された高さ：100％からhtml、変更された高さ：100％から.sidebar

cSSの方法を使用すると、サイドバーの高さはブラウザーのビューポートにのみ一致します。そのため、アプローチ1を見ると、スクロールすると、ビューポートで背景が停止していることがわかります。修正するにはjsが必要です。

0
Shadow_boi