CSS 在 100% div 内获取水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1143901/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting a horizontal scroll bar within a 100% div
提问by Matt Brunmeier
I'm trying to build a quick overview that shows the upcoming calendar week. I want it arranged horizontally so it can turn out to be quite wide if we show a full calendar week.
我正在尝试构建一个显示即将到来的日历周的快速概览。我希望它水平排列，所以如果我们显示一个完整的日历周，它会变得非常宽。
I've got it set up right now with an inner div with a fixed width (so that the floated "day" divs don't return below) and an outer div that's set to width: 100%. I'd LIKE for the outer div to scroll horizontally if the page is resized so that the inner div no longer fits in it, but instead the outer div is fixed larger at the width of the inner div and the page itself scrolls.
我现在已经设置了一个具有固定宽度的内部 div（这样浮动的“day”div 就不会在下面返回）和一个设置为 width: 100% 的外部 div。如果调整页面大小以使内部 div 不再适合它，我希望外部 div 水平滚动，而是外部 div 固定在内部 div 的宽度处更大，页面本身滚动。
Gah I'm not good at explaining these things... Here's a bit of code that might clear it up..
Gah我不擅长解释这些事情......这里有一些代码可以清除它......
The CSS:
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;
}
and the (simplified) structure:
和（简化的）结构：
<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>
So to try again - I'd like the cal_scrollerdiv always be the page width, but if the browser is resized so that the cal_containerdoesn't fit anymore I want it to scroll WITHIN the container. I can make it all work if I set a fixed width on cal_scroller but that's obviously not the behavior I'm going for. I'd rather not use any javascript cheats to adjust the width of the div if I don't have to.
所以再试一次 - 我希望cal_scrollerdiv 始终是页面宽度，但是如果调整浏览器的大小以cal_container使其不再适合，我希望它在容器内滚动。如果我在 cal_scroller 上设置固定宽度，我可以让它全部工作，但这显然不是我想要的行为。如果不需要，我宁愿不使用任何 javascript 技巧来调整 div 的宽度。
回答by Noah Medling
Your cal_scrollerclass is 100% + 20px (padding) wide. Use a margin on cal_containerinstead, like so:
你的cal_scroller班级是 100% + 20px (padding) 宽。cal_container改为使用边距，如下所示：
.cal_scroller {
padding: 10px 0;
overflow: auto;
width: 100%;
}
.cal_container {
margin: 0 10px;
width: 935px;
}
See herefor a description of how the box model works (in short, the everythingis outside the width/height of an element).
请参阅此处了解盒模型如何工作的描述（简而言之，一切都在元素的宽度/高度之外）。
Also, block elements (like <div>s) are 100% width by default, making your 100% width declaration redundant.
此外，块元素（如<div>s）默认为 100% 宽度，使您的 100% 宽度声明变得多余。
回答by mveerman
I didn't read your question very carefully, but when you have width: 100%and padding, that's generally not what you want.
我没有仔细阅读你的问题，但是当你有width: 100%and 时padding，这通常不是你想要的。
100% + 20px > 100%- that might be the problem.
100% + 20px > 100%- 这可能是问题所在。
回答by Plutor
One problem I see is your width: 100%rule. div.cal_scrolleris already a block-level element, so it'll default to filling the entire page width. (Not to mention that padding is added on topof width, so you end up with that div being bigger than the page.)
我看到的一个问题是你的width: 100%规则。 div.cal_scroller已经是一个块级元素，所以它会默认填充整个页面宽度。（更不用说在宽度的顶部添加了填充，因此您最终会发现该 div 比页面大。）
Just get rid of that width rule, and you should be golden. (I just tried myself, and it worked like a charm.)
只要摆脱那个宽度规则，你就应该是金色的。（我只是尝试了自己，它就像一个魅力。）
回答by MarvinVK
I struggled with this a lot but the simplest solution I found was adding:
我为此苦苦挣扎，但我找到的最简单的解决方案是添加：
.cal_container { white-space: nowrap; }
This way you don't have to give it a width at al. It just makes sure everything stays in one line.
这样你就不必给它一个宽度。它只是确保所有内容都在一行中。
