css - polymer core-animated-pages how to set background with scrollable content -
i using core-animated-pages. of the content on pages need scrolled. want set background color pages , want background color cover scrolled area , not current viewport. how accomplish this?
more have:
<core-animated-pages flex transitions="cross-fade-all"> <div>some small content</div> <div>some long text need scrolled</div> <div>another page</div> </core-animated-pages>
so how style background color cover scrolled text?
@jeff provides large part of answer in specifying relative on div. additionally used following css position element clear of title bar above , ensure background covers reminder of page.
#instructions { background: #fff59d; min-height: calc(100vh - 200px); top:+30px; padding:10px; width:calc(100% - 24px); }
the pixels subtracted % values , top:+ allow menu bar @ top , padding on body -- these need adjust depending on height of menu bar , padding.
now wrap divs in paper-shadow find when lose background. how can apply paper-shadow effect divs?
the <content>
within <core-animated-pages>
styled position: absolute
+ top/right/bottom/left: 0
. you're not providing rest of html structure , other styles have defined, i'm assuming that's what's causing you're seeing.
try styling dom element represents page use position: relative
(you can assigning polymer-shorthand relative
attribute):
<!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>
Comments
Post a Comment