两个div一个滚动而另一个是静态的

时间:2016-11-30 01:19:14

标签: html css

我想让两个div彼此相邻,一个div滚动而另一个是静态的。一个例子是AirBnb's Map

我无法让正确的栏浮动到左侧栏的右侧。如何让左侧的酒吧占据60%的空间,而右侧的酒吧总占40%?在下面的代码中,永远不会显示右侧栏。

这是fiddle



#container {
  height: 100px;
  position: absolute;
  top: 62px;
  bottom: 0;
  left: 0;
  right: 0;
}
#left-bar {
  background-color: red;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60%;
  overflow-y: scroll;
}
#right-bar {
  position: relative;
  background-color: green;
  display: block;
  position: fixed;
  right: 0;
  left: auto;
  bottom: 0;
}

<div id="container">
  <div id="left-bar"></div>
  <div id="right-bar"></div>
</div>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

更新fiddle

#right-bar {
  position: relative;
  background-color: green;
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  //added
  width: 40%;
  height: 100%;
}

答案 1 :(得分:2)

它错过了top:0;上的#right-bar,您还应设置width:40%;,而且您不需要在#container上设置任何规则,或者只是删除它,因为固定位置是相对于视口的。

<强> 1。固定位置方法:

&#13;
&#13;
#left-bar {
  background-color: lightblue;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  overflow-y: auto;
}
#right-bar {
  background-color: lightgreen;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40%;
}
&#13;
<div id="left-bar">
  <div style="height:1000px;">scroll</div>
</div>
<div id="right-bar">static</div>
&#13;
&#13;
&#13;

<强> 2。 Flexbox方法:

&#13;
&#13;
html, body { margin: 0; height: 100%; } 
body {
  display: flex;
}
#left-bar {
  background-color: lightblue;
  width: 40%;
  overflow-y: auto;
}
#right-bar {
  background-color: lightgreen;
  width: 60%;
}
&#13;
<div id="left-bar">
  <div style="height:1000px;">scroll</div>
</div>
<div id="right-bar">static</div>
&#13;
&#13;
&#13;

第3。 CSS表格方法:

&#13;
&#13;
html, body { margin: 0; height: 100%; } 
body {
  display: table;
  width: 100%;
}
#left-bar {
  background-color: lightblue;
  display: table-cell;
  width: 40%;
  position: relative;
}
#right-bar {
  background-color: lightgreen;
  display: table-cell;
  width: 60%;
}
#scrolling {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}
&#13;
<div id="left-bar">
  <div id="scrolling">
    <div style="height:1000px;">scroll</div>
  </div>
</div>
<div id="right-bar">static</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

该代码似乎不必要地复杂化,特别是固定位置(也是绝对位置)。怎么样:

https://jsfiddle.net/ubgcas1a/

这使用内联块和定义的宽度和高度:

html, body {
  margin: 0;
}
* {
  box-sizing: border-box;
}

#container {
  height: 100px;
  width: 100%;
  margin-top: 62px;
}

#left-bar {
  background-color: red;
  display: inline-block;
  width: 60%;
  height: 100%;
  overflow-y: scroll;
}

#right-bar {
  background-color: green;
  display: inline-block;
  width: 40%;
  height: 100%;
}