Как сделать границу страницы в print CSS для каждой отдельной страницы

#html #css #print-css

#HTML #css #печать-css

Вопрос:

У меня есть длинный HTML для печати. Страница готова к печати, но мне нужно ограничить каждую отдельную страницу. Я добавил body { border:2px #666 solid; padding:5px; } в код CSS. Просмотр HTML хорош, а просмотр печати — нет. Потому что border-bottom не показывает первую страницу, а border-top не показывает все остальные страницы.

Надеюсь, я смогу объяснить, чего я хочу. Я ищу и все еще ищу решение. И я думаю, что это простой трюк. Но все еще не найден.

Ответ №1:

Лучший способ — поместить исправленное div на страницу. Важно то, что вы не должны помещать в нее какой-либо контент. Он легко работает с многостраничными:

 <html>
<head>
  <style type="text/css">
    #pageborder {
      position:fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="pageborder">
  </div>
sdf<br/>
sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>
sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>sdf<br/>
111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>
111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>
222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>222<br/>
</body>
</html>

Ответ №2:

Попробуйте это, это поможет вам: это сделает границу на весь экран.

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Border around content</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #wrapper {
      position: absolute;
      overflow: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 5px solid red;
    }
  </style>
</head>
<body>
  <div id="wrapper">
  </div>
</body>
</html>

1. для первой страницы все в порядке, но для печати есть 3-4 страницы. Другие, не существующие при печати.

2. Итак, на другой странице попробуйте добавить этот код снова… разработайте, что вы хотите

3. Хорошо, я попробовал что-то и решил свою проблему. Изменил #wrapper position:absolute на position:fixed . Спасибо за вашу помощь.

4. И можете ли вы поддержать мой вопрос. Почему они дают downvote, я не могу понять.

Ответ №3:

По умолчанию граница отображается за пределами области элемента.

Попробуйте добавить это в print CSS:

 body { box-sizing: border-box; border: 10px solid black; }

Надеюсь, это поможет!

Редактировать: вы также можете попробовать увеличить границу и временно добавить !важно для CSS-sizing и border. Это иногда помогает мне найти источник проблемы.