获得100%div内的水平滚动条

Question

我正在尝试构建一个快速概述,显示即将到来的日历周.我希望它水平排列,如果我们显示完整的日历周,它可以变得相当宽.

我现在已经设置了一个具有固定宽度的内部div(以便浮动的"day"div不返回到下面)和一个设置为width的外部div:100%.我想让外部div水平滚动,如果页面调整大小,以便内部div不再适合它,而是外部div固定在内部div的宽度更大,页面本身滚动.

Gah我不擅长解释这些事情......这里有一些代码可以清除它......

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_scrollerdiv始终是页面宽度,但如果浏览器调整大小以cal_container使其不再适合我想要它在容器中滚动.如果我在cal_scroller上设置一个固定的宽度,我可以使它全部工作,但这显然不是我想要的行为.如果我不需要,我宁愿不使用任何javascript作弊来调整div的宽度.

Answer 1

你的cal_scroller班级是100%+ 20px(填充)宽.cal_container改为使用保证金,如下所示:

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

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

请参阅此处,了解盒子模型的工作原理(简而言之,一切都在元素的宽度/高度之外).

此外,块元素(如<div>s)默认为100%宽度,使您的100%宽度声明冗余.