полимерные ядро-анимированные страницы, как установить фон с прокручиваемым контентом

Я использую основные анимированные страницы. Некоторые из содержимого на страницах нужно прокручивать. Я хочу установить цвет фона для страниц, и я хочу, чтобы цвет фона охватывал прокрученную область, а не только текущий видовой экран. Как это сделать?полимерные ядро-анимированные страницы, как установить фон с прокручиваемым контентом

Более конкретно у меня есть:

<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); 
}

Пиксели вычитаются из значений% и верхние: + позволяют на панель меню в верхней части и обивку на теле - они должны быть регулировать в зависимости от высоты строки меню и прокладка.

Теперь я хотел бы обернуть divs в тень бумаги, но я нахожу, когда я это делаю, я теряю фон. Как я могу применить эффект теневой бумаги к divs?

источник

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 было тем, чего я отсутствовал. Я добавил дополнительную разметку, которая позволила мне получить фон, чтобы покрыть остальную часть страницы, оставив пространство для панели меню выше. Я отредактирую свой пост, чтобы показать это. –

полимерные ядро-анимированные страницы, как установить фон с прокручиваемым контентом

ответ

Смежные вопросы