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

Question

I am creating a web page where I have to display two div elements side by side.

I want left div with fixed position and the right div should scroll.

HTMl Structure:

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

In the above html on clicking an "a" tag I am making an ajax call getting one big table as response and assigning it to the second div having attribute id="result"

Please help me to resolve this problem. Thanks.

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

use float , fixed height and overflow-y: scroll . '

Fiddle: https://jsfiddle.net/6ns762d6/

Answer 3

Without much CSS we can achieve this like below sample

#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;
}

Markup

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

Here is the Fiddle Demo

Answer 4

if you are working on bigger project you can use bootstrap grid. http://getbootstrap.com/css/#grid then you have responsive website free. in this case the divs stock one on another for the smallest size. Also you can divide divs as you wish ex col-xs-3/col-xs-9 (sum should be 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

In Css Add Position

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