1

I've been doing a bit of work on a page designed specifically for print in HTML/CSS and stumbled into a roadblock trying to create a left border that works across multiple (print) pages at 100% height.

After reading 'How to make page border in print CSS for every single page' and finding that the best answer didn't work, even with position: fixed. I finally gave up and copied that approach but with a suitably low negative value for the bottom property that it's unlikely to ever be surpassed in common usage. Which works for now but isn't particularly nice (you'll need to print preview it):

<html>
<head>
    <style>
    .page-break {
        page-break-after: always;
    }

    #edge {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: -10000mm;
        overflow: visible;
        border-left: 5mm solid #0081CC;
    }

    div {
        padding-left: 5mm;
    }

    </style>
</head>

<body>
    <div id="edge"></div>
    <div>
    Page 1 content
    </div>
    <div class="page-break"></div>
    <div>
    Page 2 content
    </div>
</body>
</html>

So I'm curious now if there is a cleaner (and more future proof) way of achieving the same result, the closest I got was applying a border-left direct to the body tag which, obviously, works on screen media but for print stops at the end of the content so the last page is cut off.

From research it seems like the cleanest approach by far would have been to use CSS3 Page-Margin Boxes. Sadly they aren't even supported enough to get a page on caniuse.com yet and the Mozilla implementation appears to have gotten stuck in the mud 2 years ago. (https://bugzilla.mozilla.org/show_bug.cgi?id=856371)

Does anyone have any CSS magic up their sleeve that might make this work?

Update

Just to avoid confusion, the issue with the bottom: 0 approach advocated in How to make page border in print CSS for every single page and https://stackoverflow.com/a/34574001/2823496 is illustrated in this image.

Image of the issue

The body box retains the dimensions of the content rather than extending to the bottom of the page so the border rather than covering the entirety of the last page will stop when the content does.

Community
  • 1
  • 1
Brizee
  • 190
  • 1
  • 2
  • 15

1 Answers1

-1

Make use of wrapper class. it stick only arond content

        .wrapper {
          position: absolute;
          overflow: auto;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          border-left: 5px solid red;
        }
      </style>
    </head>
    <body>
      <div class="wrapper">
  Your Content...
      </div>
    </body>

Implementation:UPADTE enter image description here

Hope its help

vijay kani
  • 140
  • 8
  • I think that's just what http://stackoverflow.com/a/24361611/2823496 said? Gave it a try anyway but doesn't seem to work - like you say it sticks around content rather than covering the full printable area. – Brizee Jan 03 '16 at 06:38
  • ok in my assumption...its been overflow from view port when print preview... so use margin with some value to fine your border view... like body { margin:10px; }... – vijay kani Jan 03 '16 at 06:58
  • I'm not sure I understand what you mean there - I tried adding a margin to the body css but that hasn't changed anything, perhaps you could edit your answer instead so I can see it in context? – Brizee Jan 03 '16 at 07:09
  • Hey, thanks for the update - I'm still not entirely sure you meant regarding CSS changes in your comment but I've updated my question to show the output I'm getting with your code and that sort of solution in general, to further illustrate the issue. Looking at your example I believe the problem would reproduce on page 6. – Brizee Jan 03 '16 at 19:45