css-布局-calc()

<div style="display: flex;">
    <div >
        <menu_left/>
    </div>
    <div style="flex-grow: 1;">
       <tables :table_title="table_title" :table_content="table_content" @typeIn_tea="handletypeIn_tea"/>
     <div class="teacher_total">当前共有教师 16 人</div>
      </div>
    </div>

//其中display:flex  弹性布局，flex-grow:1，该元素会在flex布局中自动适应宽度

2.利用css 的 calc() 函数，进行计算，将浏览器高度减去 头尾 工具栏的高度。 height:calc(100vh - 120px); 100vh 指的是浏览器高度的 100%，而100vw指的是浏览器宽度的100%； 上下都会减(平分), 一共减去120px

用途：确保元素始终占据剩余的空间

 

3.视口和body的关系
两个不是一个概念，浏览器网页可见的部分就是视口，如果超过了，那么也是可见的部分

4.calc()函数使用:
css基本数学计算,height:12px - 10px 同单位，不能用不同单位
calc()函数使得不同单位运计算成为可能

width: calc(100% - 20px);//父元素宽度100%减去20px，(这个没有定位小效果)