headerとfooterは固定したまま、スプリットスクリーンレイアウトをどう組めば良いでしょうか？

###前提・実現したいこと
html5とcss3でスプリットスクリーンレイアウトのページに挑戦してます。
headerとfooterは固定したまま、中身の部分だけをスプリットスクリーン風にしたいです。
headerとfooterなしでは検索でスブリットスクリーンを組めるコードなどに辿り着いたのですが、
そこから弄ってheaderとfooterを入れた瞬間、全部崩れてしまいます。
理想はheader, footerは固定になって、
中身（下記のコードでheaderの下）は左は写真で動かず、
右はスクロールができるようになることです。
以下のコードだと画像がheader,footerを除いた画面上のheight:100%にならず、
スクロールバーが２つ出てしまうので
そこをうまく組める方法はないでしょうか。

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" href="css/style_example.css">
6</head>
7<body>
8    <header>
9<h1><p><a href=""><img src="../img/header_logo.png"></a></p></h1>
10<nav>
11  <ul class="inline-block">
12    <li><a href="">txt01</a></li>
13    <li><a href="">txt02</a></li>
14    <li><a href="">txt03</a></li>
15  </ul>
16</nav>
17<hr class="headerUnder">
18</header>
19<div class="split-box left-box">
20<h2>MENU</h2>
21<a href="#">page 1</a>
22<a href="#">page 2</a>
23<a href="#">page 3</a>
24</div>
25<div class="split-box right-box">
26 <div class="right-inner">
27 <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
28 </div>
29</div>
30    <footer>
31   <div class="wrap">
32    <a href=""><img src="../img/footer_logo.png"></a>
33  <ul>
34      <li><a href="">txt01</a></li>
35      <li><a href="">txt02</a></li>
36      <li><a href="">txt03</a></li>
37      <li class="sFont"><a href="" class="underLine">notice</a></li>
38      <li class="sFont">2017 All Rights Reserved</li>
39  </ul>
40  </div>
41</footer>
42    </body>
43</html>

css
1html,body{
2 height:100%;
3 margin:0;
4 padding:0;
5}
6 
7* {
8 box-sizing:border-box;
9}
10 
11.split-box{
12 position:absolute;
13 width:50%;
14 height:100%;
15 padding:1em;
16}
17 
18.left-box {
19 left:0;
20 background:#000000;
21 background: url(../img/pic01.jpg) no-repeat top center;
22 background-size: cover;
23}
24 
25.right-box {
26 right:0;
27 overflow-y:scroll;
28 background:#ffffff;
29}
30 
31.left-box a{
32 color:#ffffff;
33 display:block;
34}
35 
36@media screen and (max-width:600px) { 
37 .split-box {
38 position:relative;
39 width:100%;
40 height:auto;
41 
42 }
43}

以上になります。
まだ、暦の浅いものですが、挑戦精神で色々工夫したものの、
壁にぶつかったのでみなさんの知恵をお借りしたいと思っております。
何卒宜しくお願い致します。

行動規範の内容に同意します

回答1件

.split-box がbodyに対して 100%なら header, footer が入った時点に破綻するのは当然です。下記のようにするか、header, footer の高さを固定して .split-box の高さからそれを引くとかしてみてはいかがでしょうか。

CSS
1header {
2    top: 0;
3}
4footer {
5    bottom: 0;
6}
7header, footer {
8    position: fixed;
9    width: 100%;
10    z-index: 999;
11}
12```**動くサンプル：**[https://jsfiddle.net/11zpo1jq/](https://jsfiddle.net/11zpo1jq/)