HTML、CSS、jQueryのどれかを使ってウィンドウと同じサイズの高さをdivで指定したアニメーションに指定したいです。

現状のHTMLは以下の通りです。

<html>
<head>
  <title>test</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="../css/top.css"/>
  <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
  <script src="../js/instafeed.min.js"></script>
</head>

<body>
　<div id="animation"></div>
<!-- animationには下記スクリプトを読み込ませてアニメーションが出るようにしています。 -->
  <script src="../js/particles.js"></script>
  <script src="../js/setting.js"></script>
<!-- コンテンツ内容 -->
 <script src="../js/top.js"></script>
</body>
</html>

bodyで背景色をウィンドウいっぱいに指定しています。

body{
    background-color: #6FB4FA;
    width: 100%;
    padding-bottom: 5%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

これと同じサイズに下記の部分を指定したいです。

<div id="animation"></div>

以下試してみて出来なかった内容です。
CSSで指定
・html、body、animationにheight１００％を指定
・animationにheight: 100vh;を指定
・animationにheight: １２０％；を指定（広がりましたが内容が細長くなり、ウィンドウサイズを変更すると画面下に余白が出来ました。）

jQueryで指定

$('#animation').outerHeight($(window).height());

$(window).on('resize',function(){
    winH = $(window).height();
    $('#animation').outerHeight(winH);
});

どう指定すればbodyと同じサイズにできるのでしょうか？
何方かご教授頂けますと幸いです。
※画面はスクロールできる状態なので、スクロールした分も含めたいです。