打印pdf时div布局问题

Question

我正在编写一个冗长的div结构化布局。如果页面高度很短，我希望蓝色部分独立。

Answer 1

听起来像是在尝试制作粘性页脚。如果您知道蓝色部分的高度，则可以使用此CSS-Tricks post中所述的粘性页脚方法。

以下是基于该方法的示例...

＆＃13;

＆＃13;

html, body {
  height: 100%;
}
.top {
  min-height: 100%;
  /* equal to bottom height */
  margin-bottom: -142px; 
}
.top:after {
  content: "";
  display: block;
}
.bottom, .top:after {
  /* .push must be the same height as bottom */
	height: 142px; 
}
.bottom {
  background: #ccc;
}

＆＃13;

<div class="top">
  <h1>Top</h1>
</div>

<div class="bottom">
  <h1>Bottom</h1>
</footer>

＆＃13;

＆＃13;

＆＃13;