Блог

Я пытаюсь воспроизвести стиль Pinterest master / details:

При нажатии на миниатюру отображается полноэкранный режим, содержащий подробную информацию. Главная страница с миниатюрами теперь больше не прокручивается — вместо этого прокручивается модальный подробный вид.

Я сделал это в чистом css, поместив мой основной и подробный контент в два контейнера примерно так:

 #master {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow-y: scroll;
}

#detail {
            background-color: rgba(248,249, 249, 0.5);
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow-y: scroll;   
            visibility: hidden;       
            z-index: 100;      
}
  

(Я использую JS для отображения подробного представления при нажатии на миниатюру)

Вот пример, показывающий, что я ищу (очевидно, я хотел бы воспроизвести это с помощью содержимого #master и #detail, выполненных в Foundation): http://jsfiddle.net/8nqJU/42

Когда я помещаю Foundation div в эти два контейнера, они просто игнорируются — кто-нибудь знает, как добиться этого с помощью Foundation?

С уважением, Олав

Хорошо, итак, я только что провел еще один тест с содержимым fiddle Foundation, и оказалось, что оно действительно работает так, как ожидалось. Приносим извинения за неудобства всем, кто тратит на это время. Я оставлю это здесь для тех, кто еще ищет что-то подобное.