Question

我正在尝试使用带引导程序的css复制一些看起来像全高度webmail系统的东西。

不幸的是，我发现overflow-y：scroll属性并没有阻止＃row-email-body div在填满内容后超出其父级的高度。

这导致'webmail'系统扩展到视口的高度之外，这是不希望的。

任何人都可以解释为什么它没有按照我的预期行事或者我用来构建这个页面的方法有任何指导吗？

@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必须设置height。

但是，由于我假设您希望这个高度是动态的，而不是像＃300; 300px＆＃39;那样的静态，我掀起了一个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的列和行会干扰它，所以必须删除它们。这并没有给你相同的响应能力，电子邮件列表会折叠成整行。如果需要，您将必须使用媒体查询或某些bootstraps类来创建响应/备用视图。

Answer 2

我发现overflow-y : scroll属性并未阻止＃row-email-body div在填满内容后超出其父级的高度。

要进行此类操作，您需要设置#row-email-body的高度并将其显示为block;

overflow-y : scroll 属性指定在顶部溢出时是否剪切内容，渲染滚动条或显示overflow content元素的block-level底边。

这是一个工作滚动的片段

＆＃13;

@CHARSET"UTF-8";
 html, body {
    height: 100%;
    margin: 0;
    
}
#page, /*#row-body,*/ #col-right #col-left,#row-email-body {
    height: 100%
}
#row-email-header {
    height: 140px;
}

#row-email-body {
    overflow-y: scroll;
    height: 150px;
    display: block    
}

#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; }

＆＃13;

<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>

＆＃13;

Answer 3

您需要从＃row-email-body 中删除 display：table-row 。然后你可以设置相同div的最大高度 max-height： height ，如下所示：

#row-email-body {
    max-height: 600px;
    overflow-y: scroll;
}

#row-header, #row-body, #row-email-header, { // Removed #row-email-body here!
    display: table-row;
}

CSS Overflow-y不滚动

3 个答案: