html - 如何在 "rubber"布局中对齐窄屏幕？

Question

我有标题和页面(都在包装器中)。页面由左侧菜单和内容组成。我使用 div 布局。我想要以下内容:

1. Header wrapper 和 page wrapper 填充所有屏幕宽度，但其内容(标题和页面本身)在特定宽度边界(最大和最小)内，
2. 宽屏和窄屏情况下的以下行为:

宽屏:一切OK:

窄屏:一切正常 - 包装器被其内容覆盖，并出现水平滚动；向右滚动后，我可以看到其周围的其余内容(标题和页面)

但实际上我有这个:向右滚动后我只能看到其余内容，但看不到周围的内容!

如何修复它并使其看起来像第二张图片？

示例(缩小结果窗口以查看坏情况):http://jsfiddle.net/WxaB3/9/ .

HTML:

<div id="main">
    <div id="header-wrapper">
        <div id="header">
            <b>header</b>
        </div>
    </div>
    <div id="page-wrapper">
        <div id="page">
            <div id="leftMenu">
                <b>leftMenu</b>
            </div>
            <div id="content">
                <b>ContentContentContentContent</b>
            </div>
        </div>
    </div>
</div>

CSS:

#header-wrapper, #page-wrapper{
    width: 100%;
}

#header-wrapper{
    background: LightCoral;
}

#page-wrapper{
    background: DeepSkyBlue;
}

#header, #page{
    min-width: 200px;
    max-width: 300px;
    margin: 0 auto;  
    padding: 0 20px;
}

#header{    
    background: LightPink;
}

#page{
    background: LightBlue;
}

#leftMenu{
    display: block;
    float: left;
    width: 70px;
}

#content{
    margin-left: 70px;
}

Answer 1

您需要在包装器 DIV 中 overflow hidden 的子项。我将 overflow: hidden; 添加到 #header-wrapper, #page-wrapper CSS。参见 jsFiddle:

http://jsfiddle.net/WxaB3/10/

Overflow CSS Property
Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

1. A line cannot be broken, causing the line box to be wider than the block box. A block-level box is too wide for the containing block. This may happen when an element's 'width' property has a value that causes the generated block box to spill over sides of the containing block.

2. An element's height exceeds an explicit height assigned to the containing block (i.e., the containing block's height is determined by the 'height' property, not by content height).

3. A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block.

4. A descendant box has negative margins, causing it to be positioned partly outside the box.

5. The 'text-indent' property causes an inline box to hang off either the left or right edge of the block box.

Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

Overflow:hidden;
This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.

引用: http://www.w3.org/TR/CSS21/visufx.html