jQuery 实现页面大小跟随浏览器窗口变化

一、先看一下不同的窗口下的样子

这里拖动窗口都是响应的

二、HTML源码

代码如下（示例）：

  <ul class="align-nav">
        <li class="active btn btn-outline-secondary btn-self-atcive"><a>Home</a></li>
        <li class="active btn btn-outline-secondary"><a>About As</a></li>
        <li class="active btn btn-outline-secondary"><a>My Poj</a></li>
        <li class="active btn btn-outline-secondary"><a>Study Notes</a></li>
    </ul>
    <div class="content">
        <ul class="content-box list-unstyled">
            <li style="background: url('images/home.jpg') no-repeat center; background-size: cover;" >

            </li>
            <li class="bg-success">
                2
            </li>
            <li class="bg-danger">
                3
            </li>
            <li class="bg-primary">
                4
            </li>
        </ul>
    </div>

三、CSS源码

代码如下（示例）：这里使用的是Scss的格式

#body{
  font-size: 16px;
}
.align-nav{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  list-style: none;
  width: 6rem;
  text-align: center;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-content: center;  /* 水平平均分布 //设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */
  align-items: center; /* 垂直居中    //定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */
  li{
    margin: 2rem 0 0;
    width: 100%;
    cursor: pointer;
    a{
      flex:0.5;
      margin: auto;
      display: block;
    }
  }
}
.content{


  overflow: hidden;
  .content-box{height: 99999px;list-style: none;padding: 0;margin: 0; animation: picAni 1s both}
  li{

  }
  @keyframes picAni {
    0%{height: 100%}
    100%{height: 0}

  }
}
.btn-self-atcive{
  background: red !important;
}

四、jQuery源码

代码如下（示例）：

$(document).ready(function (){
    init();
    nav_li_chick();

    //窗口监测 注拖动浏览器改变窗口是默认执行
    $(window).resize(function(event) {
        let windHeight =$(window).height();
        $(".content").css("height",windHeight);
        $(".content-box li").eq(NowIndex).css("height",windHeight)
    });
});
{
    //初始化函数
    function init(event) {
        NowIndex = 0;//设置一个全局变量，点击按钮时记录对于显示的板块的下标，默认设置为0
        $(".align-nav li").eq(0).addClass("btn-self-atcive");//页面加载默认home....加一个背景颜色，自己写的css样式
        let windHeight =$(window).height();
        $(".content").css("height",windHeight);
        $(".content li").css("height",windHeight);
    }
}
{
    //按钮点击函数
    function nav_li_chick(event) {
        $(".align-nav li").click(function (event) {

            let windHeight =$(window).height();
            var index =  $(".align-nav li").index((this));

            NowIndex = index;

            console.log(index);
            // resizeH(index);

            //按钮点击变背景并把其他按钮恢复
            $(".align-nav li").eq(index).addClass("btn-self-atcive");
            $(".align-nav li").eq(index).siblings().removeClass("btn-self-atcive");


            $(".content li").eq(index).css("display","block");
            $(".content li").css("height",windHeight);
            $(".content-box").css("margin-top",-windHeight*index)



        });
    }
}