フィードをダウンロードすると、下にあるフィルターのインプットが見えなくなります。またページをスクロールすると、ページのヘッダー（タイトル）が見えなくなってしまいます。

対応するために、ページをスクロールしてもヘッダーとフッターが固定で見えるように変更します。

headerのidをHTMLに付けます。

<header id="header">
    <nav>
        <button class="menu-btn"><i class="fa fa-bars"></i></button>
    </nav>

    <h1>RSS Reader</h1>
</header>

新しいスタイルシートをcssの中に追加します：header.css。

#header {
    background-color: blue;
    opacity: 0.5;
    position: fixed;
    width: 100%;
}

一旦、色と透明度は仮の値とします。

position(配置)をfixedに設定すると、固定できます。あとは、ヘッダーの幅がページの幅と同じになるようにします。

ブラウザーで確認すると、余分な白い部分が表示されるはずなので、下のソースコードをmain.cssに追加して消しておきます。

body, h1, h2 {
    margin: 0;
    padding: 0;
}

ブラウザーでページを確認しましょう。フィードをダウンロードし、ページをスクロールしてもヘッダーが上部に固定されているか確認します。

HTMLでフッターを準備します。

<footer id="footer">
    <input id="feed-filter" type="text" placeholder="検索する...">
</footer>

footer.cssというフッター用のスタイルシートを追加しましょう。

#footer {
    background-color: blue;
    opacity: 0.5;
    position: fixed;
    width: 100%;
    bottom: 0;
}

ヘッダーとほぼ同じソースコードですが、bottomの設定を新たに追加しています。

また、ブラウザーでページを更新し、フィードをダウンロードしてヘッダーとフッターが固定されているか確認します。

上記の画像のように、ヘッダーが固定されているのが確認できるはずです。ただし、フィードをダウンロードする時に、上のアイテムがヘッダーに隠れてしまいます。また下のアイテムもフッターに隠れてしまうので、対応していきます。

まずヘッダーとフッターではないHTMLをpageとして設定します。

<section id="page">
    <header>
        <h2>一覧</h2>
    </header>

    <div id="feed-articles"></div>
</section>

次に本文用のスタイルシートを追加します：page.css。

今回の問題はこのやり方で対応します：

1. ヘッダーに固定な高さを設定します。
2. フッターに個体な高さを設定します。
3. ヘッダーとフッターの高さより、本文の配置を設定します。

header.css

#header {
    ...
    height: 6rem;
}

footer.css

#footer {
    ...
    height: 4rem;
}

page.css

#page {
    padding-top: 6rem;
    padding-bottom: 4rem;
}

ブラウザーでページを確認します。

開発が完了したら、透明のopacityを消しておいてください。