browsers are truncating page content, using simple css

Question

I have a simple page - extracted from code used on a larger site - where the content doesn't print properly. The print preview (and printed page) often only shows the first page. (Though the example code below doesn't use bootstrap - just reading it in - my full site does use bootstrap.)

Some SO posts note similar problems with Chrome - Printing bootstrap from Chrome causes height truncation, Chrome truncates page contents in print preview - but I get the issue on a wide variety of browsers: IE, Firefox, Chrome ... I don't have to use grids or play with viewports to create the problem.

The code functions to place a menu within a always-visible fixed header, with the page content and its scrollbar beneath that. I'm not sure if the code exhibits the issue within this question page, but when run as a separate page should show the problem.

How can have all the content printed when I use these fixedheader and scrollheader classes along with bootstrap?

Example code

body {
  font-size: 30px;
  /* large font to demo content on several pages */
}

.fixedheader {
  position: fixed;
  left: 15px;
  top: 2em;
}

.scrollcontent {
  position: absolute;
  overflow: auto;
  /* prevents horiz scrollbar */
  overflow-x: hidden;
  top: 4em;
  bottom: 0px;
  left: 20px;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<p style="text-align: center;">TITLE</p>
<div class="fixedheader">
  <p>(MENU BUTTON) -- -- (MENU BUTTON)</p>
</div>
<!--- end of fixedheader -->

<div class="scrollcontent">
  <!--- Just a bunch of text that scrolls underneath the header, which contains the always-present menu buttons -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor imperdiet mi, nec fermentum dui tincidunt eu.</p>
  <p>Quisque elit dolor, pellentesque non tortor molestie, accumsan tincidunt lacus. Aliquam ut justo varius, fringilla lacus eu, semper magna.</p>
  <p>Aenean eget aliquet nunc. Morbi nec tortor ac justo ultrices suscipit.</p>
  <p> Donec accumsan neque eget urna congue, ac lobortis lorem faucibus. Etiam enim quam, bibendum pellentesque odio eu, dictum semper arcu.</p>
  <p>Fusce vel tortor non lacus pulvinar condimentum ac in ipsum. Nam facilisis accumsan condimentum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor imperdiet mi, nec fermentum dui tincidunt eu.</p>
  <p>Quisque elit dolor, pellentesque non tortor molestie, accumsan tincidunt lacus. Aliquam ut justo varius, fringilla lacus eu, semper magna. </p>
  <p>Aenean eget aliquet nunc. Morbi nec tortor ac justo ultrices suscipit. </p>
  <p>Donec accumsan neque eget urna congue, ac lobortis lorem faucibus. Etiam enim quam, bibendum pellentesque odio eu, dictum semper arcu.</p>
  <p> ...</p>
  <p> ...</p>
  <p> ...</p>
  <p>&copy; NOT Copyright Murray Publishing</p>
</div>
<!--- end of scrollcontent -->

If the element has a fixed height, then it won't expand when printed. In fact the only difference when printed is that the scrollbar doesn't appear. This has nothing to do with absolute positioning or Bootstrap. It also happens if your only css is, say, `height:10em; overflow:scroll`. What did you expect? — Mr Lister, Nov 11 '17 at 07:35
I'm sorry, I don't understand what item in my css specifies a fixed height. (I'm relatively new to css - thanks.) — Murray, Nov 11 '17 at 18:33
The selector `.scrollcontent` has `top:4em` and `bottom:0` which means its height is almost as high as its container. In other words, it's no longer determined by its content, but by the height of the container. — Mr Lister, Nov 11 '17 at 20:44

browsers are truncating page content, using simple css

0 Answers0