Javascript 将元素粘贴到视口底部，但不要'；t封面内容

我有一个按钮可以粘贴到视口的底部，并且比它的父对象更宽：

这就是我想要的。但是当视口较短时，

按钮也会覆盖我不想要的内容：


当视口小于
按钮时，我希望
按钮
粘贴到内容的底部，加上我从
按钮
中移除
底部：0时看到的内容：


但是，当视口大于内容时，
按钮
当然不再粘在视口底部：


同样重要的是，按钮是视口的全宽，并且它的父级宽度小于视口的宽度。为了实现这一点，我将按钮定位为绝对按钮，而将父按钮定位为非绝对按钮。这也是为什么我不能用flex解决这个问题

我怎样才能做到这一点？是否可以只使用css，还是需要使用javascript


正文{
框大小：边框框；
身高：100%；
保证金：0；
填充：0；
}
.孩子{
背景：浅蓝色；
文本对齐：居中；
}
.家长{
溢出：滚动；
边框：1px纯红；
身高：100%；
利润率：0.30px；
}
钮扣{
边框：1px纯绿色；
背景：蓝色；
颜色：白色；
宽度：100%；
高度：50px；
位置：绝对位置；
左：0；
底部：0；
}

bla
bla
bla
bla
bla
bla
bla
bla

bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla

按钮
您可以进行一些修改以使用flex布局模式


正文{
框大小：边框框；
身高：100%；
保证金：0；
填充：0；
}
.孩子{
背景：浅蓝色；
文本对齐：居中；
利润率：0.30px；
边框：1px纯红；
弹性：1；
}
.家长{
溢出：滚动；
身高：100%；
显示器：flex；
柔性流动：柱状nowrap；
}
钮扣{
边框：1px纯绿色；
背景：蓝色；
颜色：白色；
宽度：100%；
高度：50px；
}

bla
bla
bla
bla
bla
bla
bla
bla

bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla
bla

按钮
如果我正确理解了您的问题，您可能需要JavaScript来正确评估/计算视口高度与子视图高度，这样您就可以正确地将按钮粘贴到底部

考虑下一个解决方案：


const windowHeight=window.innerHeight；
const child=document.querySelector（'.child'）；
const button=document.querySelector（'button'）；
函数计算重量（）{
const childHeight=child&&child.offsetHeight；
//如果子对象的高度+按钮高度之和小于视口，则使按钮粘到底部
button.classList.toggle（'stick-to-bottom'，（儿童身高+button.offsetHeight）您可能会让子级溢出？可能会将
填充底部
添加到父级，使其与按钮的高度相同？您希望在视图较短时按钮保持在底部，但不覆盖内容，因此
z-index:-1
应该修复它？然后按钮将始终保留在内容后面我感觉到这一点这不是你想要的，因此你的问题需要更多specific@ZohirSalak我在后面的问题中说得更具体一点，我说当视图端口较小时，我希望它保持在内容的底部。z-index无法实现这一点。@EyalC是我考虑过的，但它需要javascript，因为这是用于ReuseAb的le组件可能有不同大小的按钮。所以我想看看是否有更多的css解决方案。谢谢，但正如我在帖子中所说的，实际的直接父级必须比按钮小，而不仅仅是可见的内容。