我必须切片一个需要全宽和全高(无滚动)的网站。它的结构非常简单:body 有一个 20px 的边框(内部)一个侧边栏和一个内容,其中将是一个水平滑块(见下图)。
我的问题是,您对设置侧边栏宽度有什么建议?您会建议我使用固定宽度的侧边栏和 jquery 来计算内容的宽度,还是更好地使用侧边栏的宽度以及百分比的内容?如果有更好的方法让我知道。
注意:我用 SCSS(CSS3) 和 HTML5 开发它,它也应该与 talbets 兼容
您可以使用 a%
width
作为侧边栏,也可以提供min-width
和max-width
值。像这样的东西。
演示代码
相关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; }
这是一个相当普遍的问题——一列需要具有固定宽度,而另一列需要响应。
本文:
http://css.fepstudio.org/en/css-box-model/1-column-fixed-1-column-fluid.html
提供了两种解决方案,一种基于绝对定位,另一种基于浮动。