Question

我在桌子上有几个div，我想制作一个div，以便它不会离开页面。我想在容器div上添加一个滚动条。但相反，我的div仍然离开我的页面：

<table style="width: 100%;">
     <tr>
         <td>
             //some stuff
         </td>
         <td>
             <div id="container" style="overflow-x: scroll;">
                 <div style="width: 1100px;"> div containing chart1 </div>
                 <div style="width: 1100px;"> div containing chart2 </div>
             </div>

         </td>
     </tr>
</table>

JSFIDDLE

Answer 1

首先，摆脱容器上的overflow-x:scroll。然后在要滚动的每个div中添加一个额外的div：

<div id="container">
    <div class="scroll">
        <div class="chart">div containing chart1</div>
    </div>
    <div class="scroll">
        <div class="chart">div containing chart2</div>
    </div>
</div>

现在你可以给“滚动”div赋予overflow-x:scroll的任何宽度（例如200px），并将内部“chart”div设置为width:1100px：

.scroll {
    width:200px;
    overflow-x:scroll; 
}
.chart {
    width:1100px; 
}

这是 jsFiddle

更新：

汤姆是对的，您可以将百分比宽度应用于“滚动”div。只需确保将overflow:hidden添加到body元素，否则表的隐藏部分将溢出页面：

body{
    overflow:hidden;
}
.scroll {
    width:20%;
    overflow-x:scroll;
}

更新了 jsFiddle

Answer 2

问题是您为单元格指定的宽度远远超过了所需的宽度（设置为较低的值，并尝试使用一些CSS来指定表格本身的高度和宽度）。

所以，宽度在这里：

<div style="width: 1100px;"> div containing chart1 </div>

应该更少，这是更新的小提琴：

Updated Fiddle

我的div不会留在我的div容器中

2 个答案: