印刷時に固定されたヘッダーでコンテンツが隠れてしまうのを解消したい

Question

前提・実現したいこと

印刷時に固定されたヘッダーで、一部のコンテンツが隠れてしまうのを解消したいです。
まだまだ未熟ものなので、いろいろ調べてみましたが、「コンテンツが印刷時でもしっかり見えるようにする」、あるいは、「印刷時のみ固定を解除できる」等の解決策がかわからず質問せていただくことにしました。

発生している問題・エラーメッセージ

現在、ホームページを作成しており、印刷プレビューで確認してみたところ、ヘッダーが固定されているためなのか、出力時、2ページ目以降、コンテンツと重なってしまい、一部分が全く見えない状況になっています。

該当のソースコード

印刷に関するコードと思しき箇所を載せさせていただきます。
情報が足りない場合は追加で載せさせていただきますので、ご指示いただければと思います。

※1ご指摘いただきましたコードをCSSの次に記載させていただきました。
※2CSSにおけるヘッダーについての記載と思しき箇所についてhtml5のコードの次に掲載させていただきました。
わかりづらくて申し訳ございませんが、改めて、よろしくお願いいたします。

/*================================================
 *  グローバルナビゲーション
 ================================================*/
@media print, screen and (min-width:768px) {
	nav {
		background: #4A4949;
		z-index: 3;
	}

	/* 共通 */
	nav ul {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	nav ul li {
		position: relative;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	nav ul li a {
		display: block;
		margin: 0;
		padding: 16px 0;
		background: #4A4949;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		line-height: 1;
		text-decoration: none;
	}

	nav ul li:hover > a {
		color: #fff;
		background: #363535;
	}

	/* 1段目 */
	nav ul.gnav > li {
		position: relative;
		width: 17%;
		float: left;
		margin: 0;
		padding: 0;
		text-align: center;
		list-style: none;
	}

	nav ul.gnav > li:first-child {
		width: 15%;
	}

	nav ul.gnav > li.subnav a {
		padding-right: 20px;
	}

	nav ul.gnav > li.subnav > a:after {
		position: absolute;
		content: "";
		top: 20px;
		width: 0;
		height: 0;
		margin-left: 10px;
		border: 5px solid transparent;
		border-top-color: #fff;
	}

	/* 2段目 */
	nav ul li ul {
		position: absolute;
		z-index: 3;
		top: 100%;
		left: 0;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	nav ul li ul li {
		overflow: hidden;
		width: 150%;
		height: 0;
		color: #fff;
		transition: .2s;
	}

	nav ul li ul li a {
		padding: 13px 15px;
		text-align: left;
		background: #3d3d3d;
		font-weight: normal;
	}

	nav ul li ul li a:hover {
		background: #363535;
	}

	nav ul li:hover > ul > li {
		overflow: visible;
		height: 40px;
		border-bottom: 1px solid #464545;
	}

	nav ul li:hover ul li:last-child {
		border-bottom: none;
	}

	nav ul.gnav > li:last-child > ul {
		left: -50%;
	}

	nav ul li ul li ul:before {
		position: absolute;
		content: "";
		top: 13px;
		left: -20px;
		width: 0;
		height: 0;
		border: 5px solid transparent;
		border-left-color: #fff;
	}

	nav ul.gnav > li:last-child ul li ul:before {
		position: absolute;
		content: "";
		top: 13px;
		left: 200%;
		margin-left: -20px;
		border: 5px solid transparent;
		border-right-color: #fff;
	}

	/* 3段目 */
	nav ul li ul li ul {
		top: 0;
		left: 100%;
	}

	nav ul li ul li ul li {
		width: 100%;
	}

	nav ul li ul li:hover > ul > li {
		border-bottom: 1px solid #464545;
	}

	nav ul.gnav > li:last-child > ul li ul {
		left: -100%;
	}

	nav ul li ul li ul li a {
		background: #3d3d3d;
	}

	nav ul li ul li ul li a:hover {
		background: #363535;
	}

	.gnav {
		display: block !important;
	}

	#spMenu {
		display: none;
	}

	.fixed {
		position: fixed;
		top: 0;
		left: 0;
	}
}

<header>
<div class="inner">
<div class="header_left">
	<p class="summary">
	</p>
	<h1><a href="index.html" class="auto-style1">
	<img src="image.png" alt="" style="width: 80%"></h1>
</div><!-- /.header_left -->
<div class="header_right">
<div class="header_nav">
<div class="header_tel" style="width: 200px">
	<span class="phonenumber">
	</span>
	<span class="phonenumber">
	<a href="tel:○○○○" class="auto-style3"><em>TEL:○○○○</em></a><br></span>
	<span class="open" style="font-size: 11pt">○○○○</span>
</div><!-- /.header_tel -->
<div class="header_contact">
<a href="contact.html" class="auto-style4" style="width: 80%">○○○○</a></div>				<!-- /.header_require -->
</div><!-- /.header_nav -->
</div><!-- /.header_right -->
</div><!-- /.inner -->
<div id="spMenu"><span id="navBtn"><span id="navBtnIcon"></span></span></div>
	<nav>
	<div class="inner">
		<ul class="gnav">
		<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
		<li class="subnav"><a href="○○○○.html" class="auto-style5">○○○○</a>
		<ul>
	    <li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
    	<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
		<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
		<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
		<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
		</ul>
		</li>
		<li class="subnav"><a href="○○○○.html" class="auto-style5">○○○○</a>
		<ul>
		<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
		<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
		<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
		</ul>
		</li>
		<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
		<li><a href="○○○○.html" class="auto-style5">○○○○</a>
		</li>
		<li><a href="○○○○.html" class="auto-style5">○○○○</a></li>
		</ul>
	</div><!-- /.inner -->
	</nav>
</header>

/*================================================
 *  一般・共通設定
 ================================================*/

header {
	box-sizing: border-box;
	z-index: 10;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fcfcfc;
}
/*================================================
 *  ヘッダー
 ================================================*/
header {
	background: #fff;
}

header > .inner {
	box-sizing:border-box;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	-webkit-justify-content: censpace-betweenter;
	justify-content: space-between;
	padding: 20px 0;
}

.summary {
	position: relative;
	margin: 0;
	padding-bottom: 5px;
	font-size: 12px;
}


.header_nav {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;

	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	-webkit-justify-content: censpace-betweenter;
	justify-content: space-between;

}

.header_tel {
	line-height: 1.2;
}

.header_tel .phonenumber {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.0;
}

.header_tel .open {
	font-size: 12px;
}

.header_require {
	margin: 0 20px;
}
.header_require a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	font-weight: bold;
	border: 2px solid #3ebf96;
	border-radius: 5px;
	text-decoration: none;
	background: #3ebf96;
}
.header_require a:hover {
	color: #999;
	border: 2px solid #3ebf96;
	background: none;
}
.header_contact a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	font-weight: bold;
	border: 2px solid #008000;
	border-radius: 5px;
	text-decoration: none;
	background: #008000;
}
.header_contact a:hover {
	color: #999;
	border: 2px solid #3ebf96;
	background: none;
}

以上になります。
一部伏字にさせて頂きましたが、コードとは関係ない箇所です。

試したこと

固定されていることが問題だとしたら、
.fixed {
position: fixed;
top: 0;
left: 0;
この箇所が怪しいと思い、position:を relativeやinitial等にしてみましたが効果はありませんでした。

また、この部分を削除しても変化はありませんでした。
cssではなくhtmlのほうなのかとも思いましたが、そのようなコードは見当たりませんでした。

補足情報（FW/ツールのバージョンなど）

ページが縦に長くなってしまうため、閲覧時にヘッダーの固定の解除はしたくないと考えています。
未熟な上に、拙い文章でわかりにくい箇所も多々あるとは思います。
情報も不足しているかとは思いますが、皆さまのお力をお貸しいただきたいと思い、質問させていただきました。
何卒、宜しくお願い申し上げます。

Comments

[x_x]

ヘッダー部分の HTML もお願いします。
Bootstrap は使っているのでしょうか？

[shibakoppe]

先程記載させていただきました。
お手数ですが、ご確認いただけますとうれしく思います。
Bootstrapですが、使用しておりません…。

[x_x]

ヘッダーに class="fixed" となっている部分がなかったのですが、別のところにあるのでしょうか？

[shibakoppe]

申し訳ありません…！
headerについて記載されている箇所のCSSを改めて掲載させていただきます…。

[x_x]

通常時にもコンテンツがかぶらないようにしていると思うのですが、それはどのようになっていますか？

[shibakoppe]

スクロールに追従する形でヘッダーが下りてくるようにしたかったので、画面上で見ている限りはコンテンツにはかぶっていません…。
2カラムのため、ヘッダーがあってメインコンテンツとサブコンテンツが並列してある形になっています。
フリーのテンプレを基に作成したので、もともとのCSSならびにhtmlを記載したほうが宜しいでしょうか…？

[x_x]

ヘッダーの高さ分だけコンテンツ全体を下げている (margin or padding) と思うのですがどうでしょうか？

[shibakoppe]

失礼しました…！
CSSで
#contents {
box-sizing: border-box;
overflow: hidden;
width: 980px;
margin: 30px auto
と記載があったので、おそらくこの部分かと思います…。
先にお伝えしたように、メインコンテンツ、サブコンテンツはid=contentsが親要素となっているので…

Answer 1

対象は .fixed ではなく、header と判明したのでいずれ解決するかと思いますが。
印刷用スタイルは @media print を使うので、細かい調整はこの中ですればいいでしょう。

@media print {
  header {
    position: absolute;
  }
}

Comments

[shibakoppe]

お返事が遅くなってしまい、大変申し訳ございません。
無事に解決いたしました。
丁寧に対応してくださり、本当にありがとうございました！
とても助かりました！