响应式固定侧边栏 CSS答案

【问题标题】：Responsive Fixed Sidebar CSS响应式固定侧边栏 CSS
【发布时间】：2015-08-11 16:12:16
【问题描述】：

使侧边栏固定在左侧并同时使网站的其余部分以全宽（减去侧边栏宽度，例如 100px）浮动到右侧的最佳 css 方法是什么。

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Title of the document</title>
    </head>

    <body>
        <div class="sidebar">
            Should be fixed, full height, 160px Width.
        </div>

        <div class="page-wrapper">
            Should be full width minus the sidebar width
        </div>
    </body>
</html>

谢谢。

【问题讨论】：

.sidebar{ 宽度：160px;高度：100vh；填充：20px 0；向左飘浮; z 指数：10；位置：固定； }
但是对于页面包装器，我不知道如何使它向右移动，并且是全宽减去侧边栏宽度。注意：我不想正确使用浮动
你不介意我向你展示使用引导程序还是你想让我使用纯 css？

标签： html css

【解决方案1】：

flexbox 可以做到。

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
}
.sidebar {
  flex: 0 0 160px;
  background: lightblue;
}
.page-wrapper {
  flex: 1 1 auto;
  background: orange;
}

<div class="sidebar">
  <p>Should be fixed, full height, 160px Width.</p>
</div>

<div class="page-wrapper">
  <p>Should be full width minus the sidebar width</p>

</div>

JSfiddle Demo

【讨论】：

jsfiddle.net/feuee0Le/1 更新了例子……看看就知道了。侧边栏不固定:)

【解决方案2】：

我刚刚为你做了一个example，看看这个：

Side-Content

它是如何工作的？

定义一个主 div，您将在其中放置 Main Contents 和 Side Contents，我称之为 Page ，并向其中添加这些 CSS 属性：

.page {
    display: table;
    direction: rtl;
    width: 100%;
    line-height: 1.5;
}

其次，添加您的 Main Contents CSS 属性，如下所示；

.main {
    background: #eee;
    float: right;
    display: table-cell;
    direction: ltr;
    width: 100%;
    vertical-align: top;
    padding: 0 1em;
}

以及您的侧面内容：

.sidebar {
    background: #ccc;
    display: table-cell;
    direction: ltr;
    width: 12em;
    vertical-align: top;
    padding: 0 1em;
}

将您的main div display 设置为table，您让元素的行为类似于table 元素，因此稍后您可以调用您的sub-divs，并通过添加display table-cell，您让元素表现得像 <td> 元素，为您的单元格定义特定的宽度，并让它们彼此相邻分配。

【讨论】：