Question

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

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

这是fiddle。

＆＃13;

#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;
}

＆＃13;

<div id="container">
  <div id="left-bar"></div>
  <div id="right-bar"></div>
</div>

＆＃13;

Answer 1

更新fiddle

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

Answer 2

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

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

＆＃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;

<强> 2。 Flexbox方法：

＆＃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;

第3。 CSS表格方法：

＆＃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;

Answer 3

该代码似乎不必要地复杂化，特别是固定位置（也是绝对位置）。怎么样：

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%;
}

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

3 个答案: