ページの下部まで拡張される 2 列のレイアウトを取得することに取り組んでいます。ただし、サイドバーcontainer-fluid
をページ全体に拡張しようとしているにもかかわらず、サイドバーが高さで切れてしまいます。
奇妙なのは、コンテンツ カラムが正常に機能することです。
HTML :
<div class="container-fluid">
<div class="row-fluid columns no-margin fill">
<div id="sidebar" class="span2 columns no-margin right-edge"></div>
<div id="contentWrapper" class="span10 columns no-margin pull-right"></div>
</div>
</div>
CSS :
html, body, form {
height: 100%;
min-height: 100%;
background-image:url("../../images/lightGreyBackground.png");
background-repeat: repeat;
font-family:"Segoe UI", Helvetica, Arial, Sans-Serif;
}
.container-fluid {
margin: 0 auto;
height: auto;
padding: 0px;
}
.columns {
height: 100%;
min-height:100%;
margin: 0px;
width: 100%;
}
.fill {
position: absolute;
height: 100%;
min-height: 100%;
}
.no-margin {
margin-left: 0%;
width: 100%;
}
.right-edge {
border-right: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#sidebar {
background-color: White;
padding-top:15px;
}