コンテンツのない要素でレスポンシブの高さを計算する方法を教えてください。

レスポンシブで、以下のようなデザインを再現したいと思っています。
（赤い背景色と青いコンテンツが重なりあっており、ウィンドウを縮めると下の用に遷移していくイメージです。）

ブルーの部分だけでしたら再現できるのですが、後ろの赤い部分のコーディング方法がわかりません…。
以下のように無理やりコーディングしてみたんですが、ウィンドウを縮めるとやはり崩れてしまいます。
レスポンシブ用にきちんと高さを計算するような方法はないでしょうか。

・HTML

<section class="comList-sec" id="achievement">
		<h2>実績</h2>
		<div class="read">テキストテキストテキストテキストテキスト</div>
		<div class="com-bg01">
			<div class="com-cont">
				<ul class=com-list>
					<li>テキスト</li>
					<li>テキスト</li>
					<li>テキスト</li>
					<li>テキスト</li>
					<li>テキスト</li>
					<li>テキスト</li>
				</ul>
			</div>
		</div>
		<div class="com-bg02">
			<div class="com-cont">
				<ul class=com-list>
					<li>テキスト</li>
					<li>テキスト</li>
					<li>テキスト</li>
					<li>テキスト</li>
					<li>テキスト</li>
					<li>テキスト</li>
				</ul>
			</div>

			</div>
	</section>

・CSS

.comList-sec{
	width: 100%;
}

.comList-sec .read{
	text-align: center;
	margin-top: 30px;
}

.comList-sec .com-bg01{
	background: #c20a20;
	margin-right: calc((100vw - 1073px) / 2);
	margin-top: 80px;
	z-index: 2;
	position: relative;
	padding: 15px 95px 50px;
}

.comList-sec .com-bg01 .com-cont{
	z-index: 1;
	position: relative;
	opacity: 0;
}

.comList-sec .com-bg02{
	background: #0450c3;
	margin-left: calc((100vw - 1073px) / 2);
	margin-top: -481px;
	padding: 15px 95px 50px;
	z-index: 3;
	position: relative;
}

.comList-sec .com-cont{
	max-width: 883px;
	margin: 0 auto 0 0;
}

.comList-sec .com-cont .com-list{
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.comList-sec .com-cont ul li{
	width: 47.89%;
	background: #fff;
	border: 2px #28498f solid;
	padding: 30px;
	margin-top: 35px;
	text-align: center;
}

@media only screen and (max-width: 1074px) {
	.comList-sec .com-bg01{
		margin-right: 20px;
		padding: 15px 6.4% 50px;
	}
	.comList-sec .com-bg02{
		margin-left: 20px;
		margin-top: -401px;
		padding: 15px 5% 50px;
	}
	.comList-sec .com-cont ul li{
		font-size: 1.8rem;
		padding:  20px;
	}
}

@media only screen and (max-width: 767px) {
	.comList-sec{
		margin-top: 80px;
	}
	.comList-sec .read{
		margin-top: 30px;
		padding: 0 15px;
		font-size: 1.7rem;
	}

	.comList-sec .com-bg01{
		margin-right: 20px;
		margin-top: 80px;
		padding: 15px 20px 50px;
	}

	.comList-sec .com-bg01 .com-cont{
	}

	.comList-sec .com-bg02{
		margin-left: 20px;
		margin-top: calc(0px - calc(100% / 0.69));
		padding: 15px 20px 50px;
	}

	.comList-sec .com-cont{
		max-width: 883px;
		margin: 0 auto 0 0;
	}

	.comList-sec .com-cont .com-list{
		width: 100%;
		display: block;
	}

	.comList-sec .com-cont ul li{
		width:  100%;
		padding: 20px;
		margin-top: 15px;
	}
}

@media only screen and (max-width: 415px) {
	.comList-sec .com-bg01{
		margin-right: 20px;
		margin-top: 40px;
		padding: 15px 20px 50px;
	}
	.comList-sec .com-bg02{
		margin-left: 20px;
		padding: 15px 20px 50px;
	}
}

@media only screen and (max-width: 375px) {
	.comList-sec{
		margin-top: 70px;
	}

	.comList-sec .read{
		margin-top: 10px;
		font-size: 1.7rem;
		padding: 0 32px;
	}

	.comList-sec .com-bg01{
		margin: 45px 15px 0 0;
		margin-right: 0;
		z-index: 2;
		padding: 15px 0 30px;
	}

	.comList-sec .com-bg02{
		margin: -135% 0 0 15px;
		padding: 15px 0 30px;
	}

	.comList-sec .com-cont{
		max-width: 100%;
		margin: 0 auto 0 0;
		padding: 0 30px 0 15px;
	}

	.comList-sec .com-cont .com-list{
		display: block;
	}

	.comList-sec .com-cont ul li{
		width: 100%;
		border: 1px #28498f solid;
		padding: 15px;
		margin-top: 15px;
		font-size: 1.7rem;
	}
}

@media only screen and (max-width: 280px) {
	.comList-sec .com-bg01{
		margin-right: 20px;
		margin-top: 40px;
		padding: 15px 20px 50px;
	}
	.comList-sec .com-bg02{
		margin-left: 20px;
		margin-top: -645px;
		padding: 15px 20px 50px;
	}
}