流体成分固定侧边栏

Question

我必须切片一个需要全宽和全高（没有滚动）的网站。 它的结构非常简单：机身有一个20px的边框（内部），一个侧边栏和一个内容，这里将是一个水平滑块（见下图）。

我的问题是，你建议我设置侧边栏宽度？ 你会建议我使用固定宽度的侧边栏和jquery来计算内容的宽度，或者更好地使用侧边栏的宽度以及百分比的内容？ 如果有更好的方式让我知道。

注意：我在SCSS（CSS3）和HTML5中开发它，它也应该与talbets兼容

Answer 1

您可以在侧边栏中使用% width，但也可以提供min-width和max-width值。某事like this。

演示代码

---

相关的 HTML ：

<div class='sidebar'></div>
<div class='content-wrp'>
    <ul class='content'>
        <li class='slice'></li>
        <!-- and so on -->
    </ul>
</div>

相关的 CSS ：

html, body, .sidebar, .content-wrp, .content, .slice {
    box-sizing: border-box;
    margin: 0;
    height: 100%;
}
body { border: solid 20px lightblue; }
.sidebar {
    float: left;
    min-width: 10em; width: 20%; max-width: 32em;
}
.content-wrp {
    overflow-x: scroll; overflow-y: hidden;
    padding-bottom: 1em; 
}
.content { width: 4000px; }

Answer 2

这是一个相当普遍的问题 - 一列需要固定宽度，另一列需要响应。

这篇文章：

http://css.flepstudio.org/en/css-box-model/1-column-fixed-1-column-fluid.html

提供两种解决方案，一种基于绝对定位，另一种基于浮动。