CSS：带有固定边栏导航的3列布局

Question

基本上我想实现3个列布局，边栏导航是固定的，但是

position:fixed

在 float 属性

上播放效果不佳

这就是我现在所拥有的：

<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

问题在于你申请＆＃34;职位：固定＆＃34;对于一个元素，它从文档流中取出，意味着文档中的任何其他内容都将在固定元素的下方/上方折叠。所以基本上发生的事情是你的浮动元素落在你固定的侧边栏上。以下是您需要做的事情：

将侧边栏移到容器外面（因为它现在已经不在文档的流程中了）：

<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>