在一个高度不变内容过多会出现Y轴滚动条的div中，怎样让一个按钮一直固定在底部20px的位置

要在高度不变且内容过多导致出现Y轴滚动条的`<div>`元素中，让一个按钮始终保持在底部20像素的位置，你可以通过CSS的`position`和`bottom`属性结合`sticky`或`calc()`函数来实现。这里有一个例子：

.container {
  position: relative;
  overflow-y: auto; /* 添加滚动条 */
  height: /* 你的div的高度 */;
}

.button-container {
  position: sticky;
  bottom: 20px; /* 固定在底部20像素 */
}

.button {
  /* 样式... */
}

在这个例子中，首先给包含内容的`div`设置`position: relative`和`overflow-y: auto`，以便当内容超过容器高度时显示滚动条。然后，将包含按钮的部分(`.button-container`)设置为`position: sticky`，这会让它的位置随着滚动条的变化保持在视口的底部直到它达到某个边界，也就是`bottom: 20px`的距离。

注意替换`.container`、`.button-container`和`.button`为实际的类名或ID。

相关问题

写一个vue组件，设置el-tootip最大高度150px，如果超出容器高度el-tootip中有滚动轴，高度不超过150无滚动轴

好的，根据你的要求，我可以为你提供一个简单的 Vue 组件示例，用于设置 `el-tooltip` 元素的最大高度并在需要时启用滚动条。代码如下：

<template>
  <el-tooltip :class="tooltipClass" :content="content">
    <div ref="tooltipContent" :style="tooltipStyle">
      <slot></slot>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  name: 'MaxHeightTooltip',
  props: {
    maxHeight: {
      type: Number,
      default: 150
    }
  },
  computed: {
    tooltipClass() {
      return this.$refs.tooltipContent.scrollHeight > this.maxHeight ? 'scrollable' : ''
    },
    tooltipStyle() {
      return {
        maxHeight: `${this.maxHeight}px`
      }
    },
    content() {
      return this.$refs.tooltipContent.innerHTML
    }
  }
}
</script>

<style>
.scrollable {
  overflow-y: auto;
}
</style>

在这个示例中，我们创建了一个名为 `MaxHeightTooltip` 的 Vue 组件，它接受一个 `maxHeight` 属性，用于设置 `el-tooltip` 元素的最大高度。该组件包含一个插槽，用于插入需要显示的内容。

组件使用 `ref` 属性引用了 `div` 元素，用于计算元素的高度。在 `computed` 中，我们使用 `scrollHeight` 属性检查内容是否超过最大高度，并在需要时添加一个带有滚动条的 CSS 类 `scrollable`。我们还使用 `tooltipStyle` 计算属性来动态设置 `el-tooltip` 的最大高度。

最后，我们在模板中使用了 `el-tooltip` 和 `div` 元素来创建一个带有 tooltip 的元素，并使用 `v-bind:class` 和 `v-bind:style` 分别绑定计算属性 `tooltipClass` 和 `tooltipStyle`。为了实现滚动条，我们还创建了一个简单的 CSS 类 `scrollable`，将 `overflow-y` 设置为 `auto`。

你可以在需要使用 `el-tooltip` 的地方，使用这个组件来实现你的需求，如下所示：

<max-height-tooltip :max-height="150" content="Tooltip content">
  <el-button type="primary" icon="el-icon-search">Search</el-button>
</max-height-tooltip>

注意：这只是一个简单的示例，需要根据你的实际需求进行更改和扩展。

react 父divy轴设置滚动之后,如何确定子div高度

如果你在父级div中设置了y轴滚动，那么子div的高度可能会根据内容的高度而变化。你可以通过以下步骤来确定子div的高度：

1. 在子div中设置样式以适应父级div的宽度。你可以使用百分比或vw（视窗宽度）来设置宽度，例如：

   .child-div {
     width: 100%;
   }

2. 获取子div的实际高度。你可以使用React的ref属性来引用子div，并使用clientHeight属性来获取实际高度，例如：

   class MyComponent extends React.Component {
     constructor(props) {
       super(props);
       this.childRef = React.createRef();
     }
     render() {
       return (
         <div className="parent-div" style={{overflowY: "scroll"}}>
           <div className="child-div" ref={this.childRef}>Hello World!</div>
         </div>
       );
     }
   }
   
   const elementHeight = this.childRef.current.clientHeight;

3. 如果你想要设置子div的高度与内容高度相同，你可以使用以下代码：

   this.childRef.current.style.height = elementHeight + "px";

请注意，如果你在父级div中设置了padding、border或margin，你需要考虑它们对子div实际高度的影响。另外，如果你设置了y轴滚动，你可能还需要考虑滚动条的高度。