如何并排显示两个div,左边的div有固定位置,右边div有垂直滚动

Question

我正在创建一个网页,我必须并排显示两个div元素.

我希望左侧div具有固定位置,右侧div应该滚动.

HTMl结构:

<div id="fixed-position">
  <ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  </ul>
</div>
<div id="result">
   It contains a big table
</div>

在上面的单击"a"标签的html中,我正在进行ajax调用,将一个大表作为响应并将其分配给具有属性的第二个div id="result"

请帮我解决这个问题.谢谢.

Answer 1

    <div style="overflow:hidden;width:100%;">
    <div  style="width:50%;height:100px;overflow:hidden;float:left;background-color:#009900;">
  <ul>
    <li>aaaaaa</li>
    <li>bbbbbb</li>
    <li>cccccc</li>
    <li>dddddd</li>
  </ul>
      </div>
    <div  style="width:50%;height:100px;overflow-x:hidden;overflow-y:scroll;float:right;background-color:#00CCFF;"  id="result">
   It contains a big table <br>
   It contains a big table <br>
   It contains a big table <br>
   It contains a big table <br>
   It contains a big table <br>
   It contains a big table <br>
   It contains a big table <br>
      </div>
      </div>