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;
}
右の列が長くなるにつれて、サイドバーにも同じことをしてほしい。
重要なのは、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=残りを処理します。
絶対位置の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のサイズ変更はページの読み込み時に非表示になります。
(すべてのことを何時間も試した後)私のためにそれを動かした唯一のことは
HTML <nav class="col-sm-3 sidebar">
CSS padding-bottom: 100%;
パーセントのパディングは私のためにそれをしました。これで、ページの一番下まで表示されます。
アプローチ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が必要です。