响应式固定侧边栏CSS

Question

使侧边栏固定在左侧，同时使网站的其余部分以全宽度浮动（向右减去侧边栏宽度，例如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>

谢谢。

Answer 1

我为您提供了一个example ，请查看：

附带内容

它是如何工作的？

定义一个主要的div，您将在其中找到您的主要内容和附带内容，我将其称为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>元素，为您的单元格定义特定的宽度，并将它们彼此相邻分配。

Answer 2

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

响应式固定侧边栏CSS

问题描述

2 个解决方案

解决方案1
0 2015-08-11 07:47:12

解决方案2
0 已采纳 2015-08-11 07:54:45

响应式固定侧边栏CSS

问题描述

2 个解决方案

解决方案1 0 2015-08-11 07:47:12

解决方案2 0 已采纳 2015-08-11 07:54:45

解决方案1
0 2015-08-11 07:47:12

解决方案2
0 已采纳 2015-08-11 07:54:45