如果一个盒子为固定宽高 里面有上下两个盒子 上面一个盒子的高度会随着选项改变 怎么使下面一个盒子填满整个空间

这是一个很常见的布局需求。可以这样实现:1. 外层盒子设置固定宽高,overflow: hidden

css

.outer {
  width: 500px;
  height: 300px;
  overflow: hidden;  
}

2. 上层盒子获取动态高度

css

.upper {
  height: ?px;  /* 动态高度 */
}

3. 下层盒子设置填满剩余空间

css

.lower {
  flex-grow: 1;
}

4. 使用 Flexbox 布局,并设置 align-items: stretch

css

.outer {
  display: flex;
  align-items: stretch;  
}

5. HTML 结构

html

<div class="outer">
  <div class="upper">...</div>
  <div class="lower">...</div>  
</div> 

stretch 选项会使 flex 容器的 cross axis 上所有项目的尺寸填满容器,而 flex-grow: 1 会使 .lower 项目占据剩余空间。所以,无论 .upper 的高度如何变化,.lower 项目的高度都会填满剩余空间

一个简单 demo:

html

<div class="outer">
  <div class="upper">
    <select v-model="height"> 
      <option value="100">100px</option>
      <option value="200">200px</option>  
      <option value="300">300px</option>
    </select>
  </div>
  <div class="lower">Flex item</div>
</div>

js

data() {
  return {
    height: '100'
  } 
}

css

.outer {
  width: 500px;
  height: 300px;
  display: flex;
  align-items: stretch;
  overflow: hidden;  
}

.upper {
  height: var(--height);  
}

.lower {
  flex-grow: 1;
  background: #ddd;
} 

这个 demo 选项不同,.upper 的高度会变化,但 .lower 项目的高度总是填满剩余空间。