在一个高度不变内容过多会出现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。

相关问题

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轴滚动，你可能还需要考虑滚动条的高度。

css y轴滚动条样式修改

可以通过CSS3中的`::-webkit-scrollbar`伪元素来修改y轴滚动条的样式，具体实现方式如下所示[^1][^2]：

/* 设置滚动条的样式 */
div::-webkit-scrollbar {
    width: 12px;
}

/* 设置滚动条轨道的样式 */
div::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #F5F5F5;
}

/* 设置滚动条的滑块样式 */
div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #00000040;
}

/* 设置滚动条的两端样式 */
div::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

其中，`::-webkit-scrollbar`用于指定整个滚动条的样式，`::-webkit-scrollbar-track`用于指定滚动条的轨道样式，`::-webkit-scrollbar-thumb`用于指定滚动条的滑块样式，`::-webkit-scrollbar-button`用于指定滚动条的两端样式。

其他说明：
- 上述代码中的`div`指的是需要添加滚动条样式的元素，可以根据实际情况进行替换。
- 除了`::-webkit-scrollbar`伪元素外，还有`::-webkit-scrollbar-corner`用于指定滚动条的角落样式，不过通常情况下不需要设置。