如何並排顯示兩個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>

這是小提琴演示

Answer 4

如果您正在處理更大的項目，則可以使用引導網格。 http://getbootstrap.com/css/#grid，那么您可以免費獲得響應式網站。 在這種情況下，divs會以最小的尺寸相互堆疊。 您也可以根據需要分割div，例如ex 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>