html - CSS Overflow-y 不滚动

Question

我正在尝试使用带有 Bootstrap 的 css 复制看起来像全高网络邮件系统的东西。

不幸的是，我发现 overflow-y : scroll 属性无法阻止 #row-email-body div 在充满内容后超出其父级的高度。

这会导致“网络邮件”系统扩展到不希望的视口(viewport)高度之外。

谁能解释为什么它没有按我预期的方式运行，或者提供任何关于我用来构建此页面的方法的指导？

@CHARSET"UTF-8";
 html, body {
    height: 100%;
    margin: 0;
}
#page, #row-body, #col-left, #col-right, #row-email-body {
    height: 100%
}
#row-email-header {
    height: 140px;
}

#row-email-body {
    overflow: scroll;    
}

#row-header, #row-body, #row-email-header, #row-email-body {
    display: table-row;
}
#page, #col-right {
    display:table;
    padding:0;
}
#row-header {
    height: 130px;
}

/* Debug Colors Only */
#row-header { background: #ddd; }
#row-body { background: #ece; }
#col-left { background: #ccc; }
#col-right { background: #bbb; }
#row-email-header { background: #999; }
#row-email-body { background: #888; }
#page { background: #eee; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div id="page" class="container">
    <div id="row-header" class="row">HEADER-ROW - Logo</div>
    <div id="row-body" class="row">
        <div id="col-left" class="col-md-4 col-xs-12">COL-LEFT - Emails</div>
        <div id="col-right" class="col-md-8 col-xs-12">
            <div id="row-email-header" class="row">
                <div class="col col-md-12">EMAIL HEADER - To/From etc.</div>
            </div>
            <div id="row-email-body" class="row">
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
        </div>
    </div>
</div>

Answer 1

问题是 overflow 只有在内容试图超出容器时才会起作用。在您的示例中，#row-email-body 没有设置高度，并且由于 HTML 的性质(垂直扩展以适合内容)，内容被推出。

为了实现滚动，您的#row-email-body 必须设置高度。

但是，由于我假设您希望此高度是动态的，而不是像“300 像素”这样的静态高度，所以我迅速创建了一个 jsfiddle。演示绝对定位以创建全屏版本而无需向外推。

更新后的 CSS:

@CHARSET"UTF-8";
 html, body {
    height: 100%;
    margin: 0;
}

#page{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
#row-body {
    position:absolute;
    top:130px;
    left:0;
    right:0;
    bottom:0;
}
#col-right{
    position:absolute;
    top:0;
    left:33.3333%;
    right:0;
    bottom:0;
}
#col-left{
    position:absolute;
    top:0;
    right:33.3333%;
    left:0;
    bottom:0;
}
#row-email-header {
    height: 140px;
}


#row-header, #row-email-header, #row-email-body {
    position:relative;
    display:block;
}

#row-header {
    height: 130px;
}

#row-email-body {
 position:absolute;
    top:140px;
    bottom:0;
    left:0;
    right:0;
    overflow-y: auto;
}

/* Debug Colors Only */
#row-header { background: #ddd; }
#row-body { background: #ece; }
#col-left { background: #ccc; }
#col-right { background: #bbb; }
#row-email-header { background: #999; }
#row-email-body { background: #888; }
#page { background: #eee; }

和 html:

<div id="page">
    <div id="row-header">HEADER-ROW - Logo</div>
    <div id="row-body">
        <div id="col-left" >COL-LEFT - Emails</div>
        <div id="col-right" >
            <div id="row-email-header" >
                <div>EMAIL HEADER - To/From etc.</div>
            </div>
            <div id="row-email-body">
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
        </div>
    </div>
</div>

不幸的是，bootstrap 的列和行干扰了这一点，因此必须将其删除。这不会给你相同的响应速度，电子邮件列表会折叠成整行。如果需要，您将不得不使用媒体查询或一些 Bootstrap 类来创建响应式/备用 View 。