请问如何让这个div高度撑满父级div?

Question

https://jsfiddle.net/kongl/84...

<template>
  <div id="main">
    <div id="main-left">

    </div>
    <div id="main-right">
      <div id="main-right-tab"></div>
      <div id="main-right-content"></div>
    </div>
  </div>
</template>

<style scoped>
#main {
  height: 100%;
}
#main-left{
  width: 40px;
  height: 100%;
  background: #444;
}
#main-right{
    position: absolute;
    left: 40px;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 998;
    width: auto;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    background: #f22;

}
#main-right-tab {
    position: relative;
    left: 0;
    height: 40px;
    white-space: nowrap;
    font-size: 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    transition: all .2s;
    -webkit-transition: all .2s;
    background: #2d8cf0;
}
#main-right-content {
  background: #19be6b;
    display: block;
    padding: 0px;
}
</style>

我想让 #main-right-content 铺满 #main-right 剩余的部分

有没有大佬帮帮忙

Answer 1

#main-right-content{height:100%}不就完事了吗

Answer 2

position: absolute;
width: 100%;
height: calc(100% - 40px);