我想让两个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;
答案 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。固定位置方法:
#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方法:
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表格方法:
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;
答案 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%;
}