流体内容固定侧栏

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

提供了两个解决方案，一个基于绝对定位和其他上浮动。