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）目前，如果我不移除position：fixed，則不會應用中間面板浮動，但我想要一個固定的側邊欄。 有什么建議么 ？ 2）我也考慮使用引導程序來使其響應。 如何使用這種布局。

布局應如下所示：

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>