Поля страницы PDF по определенным элементам - PullRequest
0 голосов
/ 03 августа 2020

У меня есть следующие html:

body {
  margin: 0;
}

#sidebar {
  width: 260px;
  position: fixed;
  top: 0;
  left: 0;
  height: 18000px;
  background: orange;
}

#content {
  position: relative;
  left: 280px;
  top: 0;
  width: 500px;
}
<body>
  <div id="sidebar"></div>
  <div id="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ratione obcaecati ipsa consequuntur amet eum repellat voluptate non, fugit tempore, esse nihil est! Delectus molestiae doloribus quod provident, iure illo?
    </p>
  </div>
</body>

В окне Chrome Печать с включенной опцией «Сохранить как pdf» я пытался применить верхнее и нижнее поля страницы только для текстовое содержимое, но когда я сделал это со следующим правилом css:

@page {
    margin: 1cm 0cm;
}

Он применяет поля ко всей странице, а на моей фоновой боковой панели отображаются обрезки сверху и снизу.

Как я могу применять поля страницы только для текстового содержимого? Возможно ли это?

Пример изображения: введите описание изображения здесь

Я использовал следующие параметры pdf:

  1. Верхние и нижние колонтитулы: отключены
  2. Поля: по умолчанию

Спасибо!

...