流体内容固定侧边栏

Question

我必须对需要全宽和全高（无滚动）的网站进行切片。 它的结构非常简单：body 有一个 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

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