Распечатать таблицу стилей css — позиционирование div

#html #css #printing #stylesheet

#HTML #css #печать #таблица стилей

Вопрос:

Привет, я только что завершил работу над своим сайтом. У меня проблемы со стилем печати. Мой html выглядит следующим образом:

 <div id="container">
<div id="main">
       <h1>title</h1>
        <div class="blockright">image in here and text</div>
         <p>paragraphs of text</p>
<div class="blockleft">image in here and text</div>
 <p>Even more paragraphs of text</p>

 <div class="clear"></div>

 <div class="footer">Copyright here</div>
</div>
</div>
  

.blockright имеет фиксированную ширину и перемещается вправо

.левый блок имеет фиксированную ширину, а левый плавающий элемент имеет ширину auto

.main имеет ширину и вмещает содержимое

В моем print css я бы хотел .blockleft и .blockright должны быть выровнены по нижней части печатаемой страницы перед нижним колонтитулом. Каждая страница на сайте должна быть доступна для печати, и я не хочу вручную изменять положение страницы для печати статьи или иметь пользовательский стиль для каждой страницы для правильной печати. Кто-нибудь знает, как выровнять div по нижней части страницы. Я попробовал абсолютное позиционирование, но не смог заставить его работать. Есть идеи?

Заранее большое спасибо

Комментарии:

1. как это выглядит прямо сейчас, используйте jsfiddle

Ответ №1:

в вашей таблице стилей печати

  #main {
   position:fixed;
   bottom:0;
   left:0;
   display:block
}
  

Если вы не хотите, чтобы весь #main переместился в самый низ, просто оберните другой div вокруг .blockleft и .blockright и примените к нему этот css. Увы, это, вероятно, не будет работать в IE6, однако вы можете попробовать применить некоторые методы, используемые для прикрепления нижнего колонтитула к странице. вот один пример http://ryanfait.com/sticky-footer /