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调用，将一个大表作为响应并将其分配给具有属性id="result"的第二个div

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

Answer 1

＆＃13;

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

＆＃13;

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

如果你正在开发更大的项目，你可以使用bootstrap网格。 http://getbootstrap.com/css/#grid 然后你有响应网站免费。在这种情况下，divs以最小的尺寸一个接一个地存在。你也可以按照你想要的方式划分div-cols-3 / col-xs-9（总和应该是12）

$this->load->library('stlstats', $param, 'instance1');
$volume1 = $this->instance1->getVolume($unit);

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>

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

6 个答案: