如何并排显示两个 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>

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

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

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>

Answer 2

使用float，固定高度和overflow-y: scroll。 '

小提琴： https://jsfiddle.net/6ns762d6/

Answer 3

没有太多的 CSS，我们可以像下面的示例那样实现这一点

#fixed-position {
  position:fixed;
  background-color: blue;
  width:50%;
  height:300px;
   float:left;
}

#result {
   background-color: green;
   width:50%;
   height:300px;
   float:right;
}

div {
display: inline;
}

标记

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

这里是Fiddle Demo

Answer 4

如果您正在处理更大的项目，您可以使用引导网格。 http://getbootstrap.com/css/#grid 那么你就有了免费的响应式网站。 在这种情况下，div 以最小的尺寸一个接一个地存储。 您也可以根据需要划分 div，例如 col-xs-3/col-xs-9（总和应为 12）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione ipsam nobis porro, cum eum? Repellat libero deleniti dolorem illum ex officia nostrum error. Vel quaerat, officia ducimus pariatur quas voluptas. 
            </div>
        </div>
        <div class="col-xs-12 col-md-6" id="result"> 
            <table>
                <tr>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti modi odio hic sequi, magni saepe accusantium. Officiis delectus corrupti exercitationem vel, quo, nemo blanditiis voluptatibus nihil recusandae, ab voluptatum rerum.</td>
                </tr>
                                <tr>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti modi odio hic sequi, magni saepe accusantium. Officiis delectus corrupti exercitationem vel, quo, nemo blanditiis voluptatibus nihil recusandae, ab voluptatum rerum.</td>
                </tr>
                                <tr>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti modi odio hic sequi, magni saepe accusantium. Officiis delectus corrupti exercitationem vel, quo, nemo blanditiis voluptatibus nihil recusandae, ab voluptatum rerum.</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<style>

#result {
    overflow-y:scroll;
    height:100px;
}

</style>

Answer 5

在 Css 中添加位置

       #fixed-position {
    position: fixed;
    float:left;
    width: 20%;
    border: 1px solid green;
    }
    #result {

    height: auto;float:right;
    width: 40%;
  }

Answer 6

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

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