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如何让子级字体大小适应父级高度

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

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

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

以下是示例代码：

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

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

css设置高度为100%，而且不随页面大小改变

CSS中的`height: 100%`通常用于让元素的高度与其父元素的高度保持一致，当希望元素充满其容器时非常有用。但是，直接设置`height: 100%`有时不会完全占据整个屏幕，特别是当父元素不是视口（viewport）或者没有明确的高度值时。

如果你想要一个元素始终保持全屏高度，并且不受滚动的影响，可以采用以下方法：

1. **HTML结构**：
确保你的元素有一个包含它的固定高度的祖先元素，例如`html`和`body`标签，或者一个拥有`min-height: 100vh;`（视口高度单位`vh`) 的外层容器。

<div class="full-screen-container">
  <!-- 你的内容 -->
</div>

2. **CSS样式**：
给这个`full-screen-container`应用`height: 100%; overflow: auto;`，这会让它填充其可用空间，并允许内部内容滚动。

.full-screen-container {
  height: 100%;
  min-height: 100vh;
  overflow: auto; /* 如果内容超过容器高度 */
}

这样，无论浏览器窗口大小如何变化，该元素都会填满整个可视区域。