如何将水平滚动条添加到具有垂直滚动条的父div的内部div？

Question

我有一个固定的高度一个div，其包括下一个定位成彼此两个div：

<div id="idContainer"> 
    <div id="idPaneLeft"> 
    ... 
    </div><div id="idPaneRight"> 
    ... 
    </div> 
</div> 

内的div具有与应同时与一个共同的垂直滚动条来滚动相同的高度内容：

div#idContainer { 
//... 
    overflow-y: scroll; 
} 

这按预期工作。

样品：http://jsfiddle.net/8dy8x4y1/

右内div的内容的宽度大于所述div的，并应与水平滚动条来滚动：

div#idPaneRight { 
    ... 
    overflow-x: scroll; 
} 

然而，增加该设置破坏格布局，并且不可能同时滚动两个内部div的内容与垂直滚动条。

样品：http://jsfiddle.net/t1wy1vws/

任何解决问题的建议表示赞赏。

Answer 1

它似乎默认vertical-align: middle正在应用。

您只需要将vertical-align: top应用于两个子元素。

而且，display: inline-block在内联块元素之间引入了一些空白区域。要删除这些空间，我们需要提及父容器的font-size作为0px，然后再将默认font-size应用于内联块子元素。

Updated Fiddle