<div class="page-main" style="display: flex;flex-direction: column;height: 100vh;"> <div class="header py-2">页头</div> <div class="content my-3 my-md-5">内容</div> <div class="header d-md-block p-0 collapse show" id="header-navigation" style=" position: absolute; bottom: 0; width: 100%; z-index: 999; position: fixed; ">页脚</div> </div> 页脚以固定在底部，怎么让内容DIV在中间自动适应高度

要让内容（.content）DIV在中间自动适应高度，你可以使用flex布局的属性来实现。在父容器（.page-main）上设置display为flex，并将flex-direction设置为column，这样子元素会按照垂直方向排列。然后，可以将内容（.content）DIV的flex属性设置为1，这样它会自动占据剩余的空间，并垂直居中。

以下是修改后的代码示例：

<div class="page-main" style="display: flex; flex-direction: column; height: 100vh;">
   <div class="header py-2">页头</div>
   <div class="content my-3 my-md-5" style="flex: 1;">内容</div>
   <div class="header d-md-block p-0 collapse show" id="header-navigation" style="
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 999;
    position: fixed;
">页脚</div>
</div>

这样，内容（.content）DIV将会在中间自动适应剩余的高度，并且页脚（.header）将固定在底部。

相关问题

<div class="xs"> <div class="xs-header"> <span>品牌运营</span><button>2022年4月</button> </div> <div class="xs-box"><Pie2 /></div> </div>我想修改vs-box让它占高度的60%并且置于父级元素底部

你可以使用 CSS 的 flexbox 布局实现这个效果，具体的代码如下：

.xs {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
}

.xs-box {
  height: 60%;
}

首先，将父级元素 `.xs` 设为 `display: flex;`，这样它的子元素就可以通过 flexbox 进行布局。然后通过 `flex-direction: column;` 将子元素垂直排列，并将 `justify-content: flex-end;` 设置为底部对齐。最后，将子元素 `.xs-box` 的高度设为 60% 即可。

display: flex; flex-direction: column;

`display: flex;` 和 `flex-direction: column;` 是CSS中用于布局的属性。

`display: flex;` 用于创建一个弹性容器，使其内部的子元素能够按照一定的规则进行布局。这个属性可以应用在父元素上。

`flex-direction: column;` 用于指定弹性容器内部子元素的排列方向为垂直方向。子元素会从上到下依次排列。这个属性可以应用在父元素上。

以下是一个示例代码，展示了如何使用 `display: flex;` 和 `flex-direction: column;` 进行布局：

<style>
    .container {
        display: flex;
        flex-direction: column;
    }

    .item {
        width: 100px;
        height: px;
        background-color: #ccc;
        margin-bottom: 10px;
    }
</style>

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

在上述代码中，`.container` 是一个具有 `display: flex;` 和 `flex-direction: column;` 属性的容器，`.item` 是容器内的子元素。子元素会按照垂直方向从上到下依次排列。