获得了100％的div内的水平滚动条(Getting a horizontal scroll bar

我试图建立一个快速概览，显示即将到来的日历周。 我想它水平放置，因此它可以变成是相当广泛的，如果我们表现出一个完整的日历星期。

我知道了树立正确的现在与固定宽度（以便浮动的“天”的div不返回以下），并且被设置为宽度的外格内的div：100％。 我想对于如果页面调整，让内部的div不再适合它，而是外层的div固定在内部div的宽度和页面本身滚动较大的外层div水平滚动。

尔加我不擅长解释这些事情......下面是一些代码，可能把它清除掉..

CSS的：

.cal_scroller {
    padding: 0;
    overflow: auto;
    width: 100%;
}

.cal_container {
    width: 935px;
}

.day {
    border: 1px solid #999;
    width: 175px;
    height: 200px;
    margin: 10px;
    float: left;
}

和（简化）的结构：

<div class="cal_scroller">
    <div class="cal_container">
        <div class="day">Monday</div>
        <div class="day">Tuesday</div>
        <div class="day">Wednesday</div>
        <div class="day">Thursday</div>
        <div class="day">Friday</div>
    </div>
</div>

所以要再试一次-我想要cal_scroller DIV永远是页面的宽度，但如果浏览器被调整，让cal_container不适合了，我希望它滚动在容器内。 我可以把它所有的工作，如果我设置cal_scroller固定宽度但是这显然不是我要的行为。 如果我没有我宁可不使用任何JavaScript欺骗调整div的宽度。

Answer 1:

您的cal_scroller类是100％+ 20像素（填充）宽。 使用以保证金cal_container代替，就像这样：

.cal_scroller {
    padding: 10px 0;
    overflow: auto;
    width: 100%;
}

.cal_container {
    margin: 0 10px;
    width: 935px;
}

见这里为的盒模型是如何工作的描述（总之， 一切都是元素的宽度/高度外）。

另外，块元素（如<div> S）的默认100％的宽度，使你的100％的宽度声明冗余。

Answer 2:

一个问题，我看到的是你的width: 100%规则。 div.cal_scroller已经是块级元素，所以它会默认为填充整个页面宽度。 （且不说填充是在宽度的顶部增加，所以你最终该div比页面更大。）

刚刚摆脱该宽度规则的，你应该是金色的。 （我只是想自己，和它的工作就像一个魅力。）

Answer 3:

我没有仔细阅读你的问题，但是当你有width: 100%和padding ，这通常不是你想要的。

100% + 20px > 100% -这可能是问题。

Answer 4:

我挣扎着跟这个有很多，但我发现这是添加简单的解决方案：

.cal_container { white-space: nowrap; }

这样，您就不必给它的宽度等人。 它只是确保一切都停留在一行。

文章来源: Getting a horizontal scroll bar within a 100% div