polymer core-animated-pages如何设置可滚动内容的背景

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

更具体地说，我有：

<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上的相对值时提供了很大一部分答案。此外，我使用以下CSS将元素放置在上面的标题栏之外，并确保背景涵盖了页面的提醒。

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

从％值和顶部中减去像素：+允许在顶部的菜单栏和身体上的填充 - 这些将需要取决于菜单栏的高度是调整和填充。

现在我想将纸卷包装在纸上，但是我发现当我这样做时，我失去了背景。我如何将纸张 - 阴影效果应用于div？

来源

2014-12-05 Will Hopkins

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

尝试造型表示页面的DOM元素使用position: relative（可以通过指定它的聚合物速记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>

来源

2014-12-07 19:00:06

感谢。在div上指定相对是我所缺少的。我添加了一些额外的标记，使我能够获得背景以覆盖页面的其余部分，同时为上面的菜单栏留出空间。我将编辑我的帖子以显示此内容。 – 2014-12-08 01:09:37

polymer core-animated-pages如何设置可滚动内容的背景

回答

相关问题