在 100% div 内获取水平滚动条 [英] Getting a horizontal scroll bar within a 100% div

问题描述

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

我现在已经设置了一个具有固定宽度的内部 div(这样浮动的day"div 就不会在下方返回)和一个设置为 width: 100% 的外部 div.如果调整页面大小以使内部 div 不再适合它，我希望外部 div 水平滚动，而是将外部 div 固定为内部 div 的宽度更大，页面本身滚动.

啊，我不擅长解释这些事情......这里有一些代码可以解决这个问题......

CSS:

.cal_scroller {填充:0；溢出:自动；宽度:100%；}.cal_container {宽度:935px；}.日 {边框:1px 实心 #999；宽度:175px；高度:200px；边距:10px；向左飘浮;}

和(简化的)结构:

<div class="cal_container"><div class="day">星期一</div><div class="day">星期二</div><div class="day">星期三</div><div class="day">星期四</div><div class="day">星期五</div>

所以再试一次 - 我希望 cal_scroller div 始终是页面宽度，但如果浏览器调整了大小，使得 cal_container 不再适合我希望它在容器内滚动.如果我在 cal_scroller 上设置固定宽度，我可以让它全部工作，但这显然不是我想要的行为.如果不需要，我宁愿不使用任何 javascript 技巧来调整 div 的宽度.

解决方案

你的 cal_scroller 类是 100% + 20px (padding) 宽.改为在 cal_container 上使用边距，如下所示:

.cal_scroller {填充:10px 0;溢出:自动；宽度:100%；}.cal_container {边距:0 10px；宽度:935px；}

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

此外，块元素(如

s)默认为 100% 宽度，使您的 100% 宽度声明变得多余.

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.

Gah I'm not good at explaining these things... Here's a bit of code that might clear it up..

The 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_scroller div always be the page width, but if the browser is resized so that the cal_container doesn'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.

解决方案

Your cal_scroller class is 100% + 20px (padding) wide. Use a margin on cal_container instead, like so:

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

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

See here for a description of how the box model works (in short, the everything is outside the width/height of an element).

Also, block elements (like <div>s) are 100% width by default, making your 100% width declaration redundant.

这篇关于在 100% div 内获取水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！