html盒子高度自适应

如果想让HTML盒子高度自适应，可以使用以下方法：
1. 设置html,body的高度为100%：html,body{height:100%;}
2. 设置HTML盒子的高度为100%：元素{height:100%;}
3. 使用最小高度自适应属性min-height：min-height:value;（IE6浏览器不识别该属性）
4. 使用hack1:min-height:value; _height:value;的方法兼容元素具备最小高度自适应的效果。

相关问题

二次封装ant design vue 1.7.8版本中table，实现高度 随父盒子高度自适应

首先，在封装的table组件中，需要在template中使用一个div包裹住整个table，同时设置该div的高度为100%。

<template>
  <div class="custom-table" style="height: 100%">
    <a-table :columns="columns" :data-source="dataSource" :pagination="false">
      <slot></slot>
    </a-table>
  </div>
</template>

接着，在style中，为a-table添加一个max-height属性，值为100%。

.custom-table .ant-table {
  max-height: 100%;
}

最后，在父组件中，需要为包含该table的容器设置高度。这里使用了flex布局，将容器的flex-grow属性设置为1，使其自适应父容器的高度。

<template>
  <div class="parent-container">
    <custom-table :columns="columns" :data-source="dataSource">
      <a-button slot="title" type="primary">添加</a-button>
      <template slot="action" slot-scope="text, record">
        <a-button size="small">编辑</a-button>
        <a-button size="small">删除</a-button>
      </template>
    </custom-table>
  </div>
</template>

<style>
.parent-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.parent-container custom-table {
  flex-grow: 1;
}
</style>

这样就可以实现高度随父盒子高度自适应的table组件了。

父盒子下的标题行高度自适应，内容区flex设为1，内容区超出滚动

这是一个典型的flex布局嵌套，可以按照以下代码进行实现：

HTML部分：

<div class="wrapper">
  <div class="header">
    <h1>标题</h1>
  </div>
  <div class="content">
    <p>内容区</p>
  </div>
</div>

CSS部分：

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  height: auto;
}

.header h1 {
  margin: 0;
  padding: 20px;
  line-height: 1.2;
}

.content {
  flex: 1;
  overflow-y: scroll;
  padding: 20px;
}

其中，父盒子设置为flex布局，并且高度设置为100%；标题行高度设置为自适应，即设置为auto；标题行内的h1标签进行一些样式设置，包括margin、padding和line-height；内容区设置为flex: 1，即将剩余空间全部占满，同时设置overflow-y:scroll，当内容区超出时出现滚动条。