Question

我有一个简单的页面 - 从较大网站上使用的代码中提取 - 内容无法正确打印。打印预览（和打印页面）通常只显示第一页。（虽然下面的示例代码不使用bootstrap - 只需读取它 - 我的完整站点确实使用bootstrap。）

有些SO帖子指出了与Chrome相似的问题 - Printing bootstrap from Chrome causes height truncation，Chrome truncates page contents in print preview - 但我在各种浏览器上遇到了问题：IE，Firefox，Chrome ......我不需要使用网格或使用视口来创建问题。

该代码用于将菜单放置在始终可见的固定标题中，其中页面内容及其滚动条位于其下方。我不确定代码是否在此问题页面中显示问题，但是当作为单独的页面运行时应该显示问题。

当我使用这些fixedheader和scrollheader类以及bootstrap时，如何打印所有内容？

示例代码

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 -->

浏览器使用简单的css

0 个答案: