2015-11-19 103 views
0

基本上我想實現與側欄導航固定3點佈局,但CSS:3個欄佈局與固定側欄導航

position:fixed 

浮動財產

這是沒有發揮好我現在有:

<div id="container"> 
    <sidebar> 
     <!-- MENU --> 
    </sidebar> 

    <div class="middle-panel"> 
    <!-- MIDDLE STUFF LIKE SEARCH BUTTON --> 
    </div> 

    <div class="main-content"> 
    <!-- MAIN STUFF COMES HERE --> 
    </div> 
</div> 

CSS

html, body 
{ 
    height: 100%; 
} 

#container 
{ 
    height: 100%; 
} 

sidebar 
{ 
    display: block; 
    width: 350px; 
    float: left; 
    z-index: 4; 
    position: fixed; 
    height: 100%; 
} 

.middle-panel 
{ 
    float: left; 
    width: 80px; 
    height: 100%; 
} 

.main-content 
{ 
    height: 100% 
} 

1)目前,如果我不刪除位置:固定然後中間面板持股量將不會被應用,但我希望有一個固定的側欄。有什麼建議麼 ? 2)我也想到使用bootstrap使它響應。這將如何與這個佈局一起工作。

這是佈局應該什麼樣子:

enter image description here

回答

1

的問題是,當你申請「的位置是:固定」的元素,它被取出文件的流程,這意味着任何文件中的其他下會崩潰/在固定元素的頂部。所以基本上發生了什麼是您的浮動元素正在您的固定側欄上。這裏有您需要做什麼:

上移邊欄的容器外(因爲它現在是出文檔的流程現在反正):

<sidebar> 
    <!-- MENU --> 
</sidebar> 

<div id="container"> 

    <div class="middle-panel"> 
    <!-- MIDDLE STUFF LIKE SEARCH BUTTON --> 
    </div> 

    <div class="main-content"> 
    <!-- MAIN STUFF COMES HERE --> 
    </div> 
</div> 

或包裹一個新的容器內的其他元素:

<div id="container"> 

    <sidebar> 
     <!-- MENU --> 
    </sidebar> 

    <div id="another_container">  
    <div class="middle-panel"> 
     <!-- MIDDLE STUFF LIKE SEARCH BUTTON --> 
    </div> 

    <div class="main-content"> 
     <!-- MAIN STUFF COMES HERE --> 
    </div> 
    </div> 

</div> 

然後給你任何的#container(我的第一個例子),或者你的新#another_container(我的第二個實例)的利潤率左的寬不過你希望你的側邊欄是。在你的例子中它是350px。你永遠不會讓一個固定的元素響應你想使用它的方式,所以設置這個固定的邊距不會是一個問題。相反,您可以讓其他元素響應。

0

我想你想放的側邊欄,並在具有固定位置的父div的,中間面板。

<div class="sidebar-container"> 
    <div class="sidebar"> 
    Side panel 1 
    </div> 
    <div class="middle-panel"> 
    Middle Panel 
    </div> 
</div> 
<div class="main-content"> 
    Main Content - Scrollable 
</div> 

<style> 
    .sidebar-container { 
     position: fixed; 
     left: 0; 
    } 
    .sidebar, .middle-panel { 
     display: inline-block; 
    } 
</style> 
+0

耶差不多,但在中間面板現在的寬度是不推動的主要內容:/ – Unsparing

+0

添加一個餘裕:__px;到主內容分區 –