在 100% div 内获取水平滚动条答案

【问题标题】：Getting a horizontal scroll bar within a 100% div在 100% div 内获取水平滚动条
【发布时间】：2009-07-17 15:12:54
【问题描述】：

我正在尝试构建一个显示即将到来的日历周的快速概览。我希望它水平排列，这样如果我们显示一个完整的日历周，它就会变得相当宽。

我现在已经设置了一个固定宽度的内部 div（这样浮动的“day”div 就不会在下面返回）和一个设置为 width: 100% 的外部 div。如果调整页面大小以使内部 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 的宽度。

【问题讨论】：

对不起大家，这是我的问题。我只是将代码放在一个独立的文件中，它工作正常。我的文档中还有其他一些愚蠢的事情正在打破这一点。对不起！

标签： css scroll

【解决方案1】：

您的 cal_scroller 类是 100% + 20px（填充）宽。改为在cal_container 上使用边距，如下所示：

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

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

请参阅here，了解有关盒子模型如何工作的说明（简而言之，所有内容都在元素的宽度/高度之外）。

此外，块元素（如 <div>s）默认为 100% 宽度，因此您的 100% 宽度声明是多余的。

【讨论】：

很好，但删除填充并不能解决问题。页面仍然滚动而不是滚动 div

【解决方案2】：

我看到的一个问题是您的width: 100% 规则。 div.cal_scroller 已经是块级元素，所以它会默认填充整个页面宽度。（更不用说在宽度的 top 上添加了填充，所以你最终会得到那个 div 比页面大。）

只要摆脱那个宽度规则，你就应该是金色的。（我自己试了一下，效果很好。）

【讨论】：

我去掉了宽度：100%；它没有改变任何东西。正如人们所说，这是多余的，但我希望它有助于描述我正在尝试做的事情（我不想在滚动 div 上设置固定宽度）。当窗口被调整大小（而不是滚动整个页面）时，您在滚动器 div 中发生滚动？？

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我为此苦苦挣扎，但我找到的最简单的解决方案是添加：

.cal_container { white-space: nowrap; }

这样你就不必给它一个宽度。它只是确保一切都保持在一条线上。

【讨论】：