js设置div高度低于滚动高度时固定

今天在电脑端看csdn时，发现文章界面一般分为三大块：左边侧边栏显示用户基本信息和广告、中间文章部分、右边用户的文章专栏。整体用的是float。右边的文章position设置为fixed。左边侧边栏是当滚动高度超过侧边栏高度时，设置为fixed，即这时候侧边栏保持不变，bottom=0

    let aside = document.getElementsByClassName('aside')[0]
    let asideTop = aside.offsetTop
    let asidescroll = document.body.scrollTop
    let asideBottom = aside.offsetTop + aside.clientHeight
    window.addEventListener('scroll', function() {
      let screenBottom =
        document.documentElement.scrollTop +
        document.documentElement.clientHeight //获取当前界面距离顶部的高度
      if (asideBottom < screenBottom) {
        aside.classList.add('fixed')
      } else {
        aside.classList.remove('fixed')
      }
    })

在写右边栏position:fixed时出现了一点问题
跟着CSDN模仿着写的。
在设置右边recommend时，高度设置height:100%时，会出错。
这是因为flex布局的问题，flex布局内即使形状上被子元素撑开了，但是实际上还是没有撑开的。

因为整个页面是flex，使用了
justify-content:center
align-item:center