实现这种布局，同时保持响应？

-1

我有一个使用固定侧栏的布局，占用屏幕的大约20%，另一个80%是一个很长的垂直滚动。实现这种布局，同时保持响应？

+------+------------------------+ 
| F |   S    | 
| I |   C    | 
| X |   R    | 
| E |   O    | 
| D |   L    | 
|  |   L    | 
+------+------------------------+

现在我已经将它设置了使用的东西是这样的：

<div class="menu"> ... </div> 
<div class="content"> ... </div>

然后我他们的风格是这样的：

.menu{ 
    background: #f6f6f6; 
    width: 200px; 
    position: fixed; 
    top: 0; 
    bottom: 0; 
} 

.content{ 
display: block; 
    width: 77%; 
    height: 4000px; 
    float: left; 
    left: 208px; 
    position: absolute; 
    padding: 20px; 
    top: 0; 
    overflow-y: scroll; 
}

现在虽然这样做的工作，但确实有助于良好以响应。由于它们是absolute和fixed，因此它们会在放大时在边上创建边框。我有什么选择来实现这种布局？

Current Demo，对于乱码的道歉。

来源

2015-09-11 knocked loose

您可以使用CSS媒体/屏幕尺寸查询中使用不同的CSS为每个分辨率。这应该很容易解决你所有的问题。 – Dodekeract

我打算在我不得不切换到手机时使用它们。但是我一直在寻找一种解决方案，我可以在不触摸媒体查询的情况下，在整个屏幕尺寸上保持80％或20％。 –

我可以看到左侧菜单和右侧的宽度。只需从右侧删除宽度，它将覆盖屏幕的剩余空间。检查这个http://codepen.io/anon/pen/Zbbxwo。 –

这是你在找什么？ http://jsfiddle.net/DIRTY_SMITH/a0my545L/3/

HTML

<div class="div-1"></div> 
<div class="div-2"></div>

CSS

body{margin: 0px;} 
.div-1{ 
    background: blue; 
    width: 200px; 
    position: fixed; 
    top: 0; 
    bottom: 0; 
} 
.div-2{ 
    background: red; 
    display: block; 
    width: calc(100% - 200px); 
    height: 4000px; 
    float: left; 
    left: 200px; 
    position: absolute; 
    top: 0; 
    overflow-y: scroll; 
}

来源

2015-09-11 16:05:12

实现这种布局，同时保持响应？

回答

相关问题