聚合物核心动画页面如何使用可滚动内容设置背景答案

【问题标题】：polymer core-animated-pages how to set background with scrollable content聚合物核心动画页面如何使用可滚动内容设置背景
【发布时间】：2014-12-05 19:11:51
【问题描述】：

我正在使用核心动画页面。页面上的某些内容需要滚动。我想为页面设置背景颜色，并且我希望背景颜色覆盖滚动区域而不仅仅是当前视口。我该如何做到这一点？

更具体地说，我有：

<core-animated-pages flex transitions="cross-fade-all">
<div>Some small content</div>
<div>Some long text that will need to be scrolled</div>
<div>Another page</div>
</core-animated-pages>

那么如何设置样式让背景颜色覆盖滚动的文字呢？

@jeff 在 div 上指定 relative 时提供了很大一部分答案。此外，我使用以下 CSS 将元素定位在上方的标题栏之外，并确保背景覆盖页面的提醒。

#instructions {
  background: #FFF59D;
  min-height: calc(100vh - 200px);
  top:+30px;
  padding:10px;
  width:calc(100% - 24px);
}

从 % 值和 top:+ 中减去的像素允许顶部的菜单栏和主体上的填充 - 这些将需要根据菜单栏的高度和填充进行调整。

现在我想将 div 包裹在纸阴影中，但我发现当我这样做时会丢失背景。如何将纸影效果应用于 div？

【问题讨论】：

标签： css polymer

【解决方案1】：

<core-animated-pages> 中的<content> 是styled 和position: absolute + top/right/bottom/left: 0。您没有提供 HTML 结构的其余部分和您定义的任何其他样式，但我假设这就是导致您所看到的内容的原因。

尝试为代表页面的 DOM 元素设置样式以使用 position: relative（您可以通过为其分配 Polymer-shorthand relative 属性来做到这一点）：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Polymer core-animated-pages Demo</title>
    <style>
      core-animated-pages > div {
        background-color: orange;
      }
    </style>
  </head>
  
  <body>
    <script src="//www.polymer-project.org/webcomponents.js"></script>
    <link rel="import" href="//www.polymer-project.org/components/core-animated-pages/core-animated-pages.html">
    
    <core-animated-pages selected="1" transitions="cross-fade-all">
      <div>Some small content</div>
      <div relative>
        <h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1>
      </div>
      <div>Another page</div>
    </core-animated-pages>
  </body>
</html>

【讨论】：

谢谢。在 div 上指定相对是我所缺少的。我添加了一些额外的标记，让我可以让背景覆盖页面的其余部分，同时为上方的菜单栏留出空间。我将编辑我的帖子以显示此内容。