css父级高度设置100%怎样底部按钮固定并且让中间子级内容滚动

你可以为父级设置 `position: relative`，然后为底部按钮创建一个固定定位的元素，如下所示：

<div class="parent">
  <div class="content">
    <!-- 中间子级内容 -->
  </div>
  <div class="button">
    <!-- 底部按钮 -->
  </div>
</div>

然后，你可以为中间子级内容添加 `overflow-y: auto` 属性，以便在内容超出父级高度时出现滚动条，如下所示：

.parent {
  position: relative;
  height: 100%;
}

.content {
  height: calc(100% - 50px); /* 减去底部按钮的高度 */
  overflow-y: auto;
}

.button {
  position: fixed;
  bottom: 0;
  height: 50px; /* 底部按钮的高度 */
  width: 100%;
}

这样，底部按钮就会固定在页面底部，而中间子级内容将会在超出父级高度时出现滚动条。

相关问题

css 父级div overflow-y: scroll; height: 100%; 子级div height: 2rem; 但是父级高度还是填充不起来 怎么解决

如果子元素高度是固定的，可以尝试将父元素高度设置为固定值，如：

.parent {
  height: 200px; /* 设置为固定值 */
  overflow-y: scroll;
}

.child {
  height: 2rem;
}

如果子元素高度是动态变化的，可以使用 flex 布局，将父元素设置为 flex 容器，子元素设置为 flex 项目，如：

.parent {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

.child {
  flex: 1;
}

这样可以让子元素自适应父元素高度，填充整个父元素。

css如何让子级字体大小适应父级高度

可以使用`vh`或者`em`单位来让子级字体大小适应父级高度。

使用`vh`单位，可以将子级字体大小设置为父级高度的百分比。例如，如果父级高度为100px，可以将子级字体大小设置为`5vh`，这样子级字体大小就是父级高度的5%。

使用`em`单位，可以将子级字体大小设置为父级字体大小的倍数。例如，如果父级字体大小为16px，可以将子级字体大小设置为`0.5em`，这样子级字体大小就是父级字体大小的一半。

以下是示例代码：

.parent {
  height: 100px;
  font-size: 16px;
}

.child {
  font-size: 5vh; /* 或者 font-size: 0.5em; */
}