html - 如何使左列作为导航器，右列作为主体？

如何使左列作为导航器，右列作为主体？

<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/

最佳答案

您可以放置​​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>