html - 如何将左列作为导航器，将右列作为正文？

Question

如何将左栏设为navigator，右栏设为body？

<style>
    #leftBodyVideo{
width: 45%;
display: inline-block;
}

#rightBodyVideo{
width: 45%;
display: inline-block;
}
</style>

<div id="leftBodyVideo">
    <h5>Pyraminx ao12 16 46</h5>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/XDN9BXLFGhg" frameborder="0" allowfullscreen></iframe>

</div>

<div id="rightBodyVideo">
    <h5>Lubing DaYan ZhanChi Cube</h5>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ydg0APsB7IU" frameborder="0" allowfullscreen></iframe>

</div>

预期结果是这样的(对于文档模板):https://nodejs.org/docs/latest-v5.x/api/

Answer 1

您可以定位 div 并使用 overflow-y: scroll;。

FIDDLE

代码如下:

div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 500px;
  width: 200px;
}

<div>
  1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/> 1
  <br/>

</div>