有一个带有 width:100% 元素的水平滚动条

Question

我的网站中有下一个 DIV（占我页面宽度的 100%）：

float: left;
border: solid 2px rgb(119, 36, 98);
width: 100%;
position: relative;
margin-bottom: 10px;
background-color: #eee;
overflow-x: scroll;

我想在这个 div 中放置一个比显示的表格更大的表格（如果需要，还有一个水平滚动条）。

但如果我这样做，则不遵守规则宽度：100%

float: left;
height: 250px;
overflow-y: scroll;
width: 2000px;

有什么想法可以让我的屏幕 100% 的元素带有水平滚动条吗？

Answer 1

Demo

<div id="scroll">
    <img src="http://thinkingstiff.com/images/priorities.png" />
</div>


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

#scroll {
    height: 100%;
    overflow-x: scroll;    
    white-space: nowrap;
    width: 100%;
}

#scroll img {
    height: 100%;
    vertical-align: top; /* this prevents vertical whitespace */
}