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;
}
[的jsfiddle(http://www.jsfiddle.net)它爲我們請。 – Itay
對於初學者,這些列如何?他們都設置爲100%的寬度。你有沒有被使用的類。你能發佈更多嗎? – dudledok
我認爲你的代碼中還有其他東西會導致你的問題。我把它設置成小提琴,它工作得很好。 http://jsfiddle.net/g83Pm/ –