Раздел не отображается при предварительном просмотре печати?

Question

Это, наверное, что-то простое, но раздел «Навыки» на сайте, над которым я работаю для друга (BrianCipoletta.com), не отображается на предварительном просмотре.

Раздел «Навыки» отображается там хорошо, но когда вы нажимаете «Печать вверх» или «Предварительный просмотр», вы можете просто разобрать (и выбрать верхнюю строку), но больше ничего не отображается. Я пошел в print.css, и я все еще не понимаю.

Если у кого есть минута, чтобы взглянуть, то будем признательны, благодарю вас! Файлы CSS являются ...

http://www.briancipoletta.com/css/style.css

http://www.briancipoletta.com/css/print.css

Answer 1

В основном документе, дайте свой .container элемент для секции Skills уникальный идентификатор:

<div id="skillsContainer" class="container"> 

Затем в печати CSS , добавьте следующее правило:

#skillsContainer { 
    height: 200px; 
} 

Причина, по которой Skills не появлялась, заключалась в том, что в режиме просмотра все ее дети были абсолютно расположены, поэтому его высота по умолчанию была равна нулю.

Вы также можете настроить CSS для column-left, column-right и column-center классов, а также, как и в представлении для печати они немного выше (на 500px), чем они должны быть.