CSS：3个栏布局与固定侧栏导航

Question

基本上我想实现与侧栏导航固定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使它响应。这将如何与这个布局一起工作。

这是布局应该什么样子：

Answer 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。你永远不会让一个固定的元素响应你想使用它的方式，所以设置这个固定的边距不会是一个问题。相反，您可以让其他元素响应。

Answer 2

我想你想放的侧边栏，并在具有固定位置的父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>