聚合物核心动画页面如何设置具有可滚动内容的背景

Question

I am using core-animated-pages. 我正在使用核心动画页面。 Some of the the content on the pages will need to be scrolled. 页面上的某些内容将需要滚动。 I want to set the background color for the pages and I want the background color to cover the scrolled area and not just the current viewport. 我想为页面设置背景色，并且希望背景色覆盖滚动区域，而不仅仅是当前视口。 How do I accomplish this? 我该如何完成？

More specifically I have: 更具体地说，我有：

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

So how do I style so that the background color will cover the scrolled text? 那么，如何设置样式以使背景颜色覆盖滚动的文本？

@jeff provides a large part of the answer in specifying relative on the div. @jeff在指定div上的relative时提供了很大一部分答案。 Additionally I used the following CSS to position the element clear of title bar above and to ensure the background covers the reminder of the page. 另外，我使用以下CSS将元素放置在标题栏上方，并确保背景覆盖了页面的提醒。

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

The pixels subtracted from the % values and the top:+ allow for a menu bar at the top and the padding on the body -- these will need to be adjust depending on the height of the menu bar and the padding. 从％值和顶部减去的像素：+允许在顶部显示菜单栏，并在主体上添加填充物-需要根据菜单栏和填充物的高度进行调整。

Now I would like to wrap the divs in paper-shadow but I find when I do this I lose the background. 现在我想将divs包裹在阴影中，但是我发现这样做会失去背景。 How can I apply a paper-shadow effect to the divs? 如何在div上应用纸张阴影效果？

Answer 1

The <content> within <core-animated-pages> is styled with position: absolute + top/right/bottom/left: 0 . <core-animated-pages>的<content> 样式设置为position: absolute + top/right/bottom/left: 0 。 You're not providing the rest of your HTML structure and any other styles that you have defined, but I'm assuming that's what's causing what you're seeing. 您没有提供其余的HTML结构以及您定义的其他样式，但是我假设这就是导致您看到的内容的原因。

Try styling the DOM element that represents the page to use position: relative (you can do this by assigning it the Polymer-shorthand relative attribute): 尝试设置表示要使用position: relative的页面的DOM元素的样式（您可以通过将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>

聚合物核心动画页面如何设置具有可滚动内容的背景

问题描述

1 个解决方案

解决方案1
0 2014-12-07 19:00:06

聚合物核心动画页面如何设置具有可滚动内容的背景

问题描述

1 个解决方案

解决方案1 0 2014-12-07 19:00:06

解决方案1
0 2014-12-07 19:00:06