Question

我的布局使用的固定边栏约占屏幕的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 ，为凌乱的代码道歉。

Answer 1

这是你在找什么？ 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;
}

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

1 个答案: