绝对定位不会溢出到另一个div
Absolute Positioning without overflowing into another div
我正在尝试创建底部带有页脚的全屏滑块。使滑块全屏显示很容易，但向其添加 "footer" 似乎并不容易（对我而言）。例如，滑块将包含一张照片，其下方的 div 将包含有关照片的详细信息，在所有设备上都应显示为 "landing page" 而无需滚动。
我的大脑告诉我创建一个 100vh 的包装器容器以填充 100% 的视图高度，然后创建页脚 - 对于这个例子 - 在 150px 的设定高度，然后让滑块填充包装容器中剩余的差异，理论上似乎是正确的，但我似乎无法弄清楚如何在不使用脚本的情况下实际执行此操作。我对脚本没意见，只是想知道是否有一种纯粹的 css 方法来完成我想要完成的事情。
在这个具体的例子中，我已经尝试在页脚 div 上使用绝对定位，底部为 0 以紧靠主包装器的底部，这有点儿有效（在移动设备上尤其不稳定 iPhone 由于底部导航栏），但自然地由于绝对位置似乎起作用的方式，在滑块 div 上设置 100% 高度将忽略页脚 div 并将其高度设置为 100%包装容器。
是否可以设置 bottom: 0，同时让滑块 div 不与绝对定位的页脚 div 重叠？
是否有更好的方法使用纯 css 一起完成这一切？我是不是疯了？
这是我要完成的工作的图表
建议前的原始代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test page</title>
<meta name="description" content="test page">
<meta name="author" content="Test">
<style>
body {
margin: 0px;
}
.page-wrapper {
height: 100vh;
background-color: red;
}
.slider {
height: 100%;
background-color: blue;
}
.slider-footer {
height: 150px;
background-color: green;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="page-wrapper">
<div class="slider">
</div>
<div class="slider-footer">
</div>
</div>
</body>
</html>
更新/编辑
此外，如下所示，.slider 上的 calc(100vh -150px) 效果更好。它在桌面上运行得非常好，但在我的 iPhone 上运行时，就不是那么好了。
更新样式代码
<style>
body {
margin: 0px;
}
.page-wrapper {
height: 100vh;
max-height: 100vh;
background-color: red;
}
.slider {
background-color: blue;
height: calc(100vh - 150px);
max-height: calc(100vh - 150px);
}
.slider-footer {
height: 150px;
background-color: green;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
iPhone 似乎在自动调整视图，因为设备上的 safari 导航按钮较低。看起来它将 .page-wrapper 向下拉伸得比它应该的更远。我试图通过向 .page-wrapper 添加 max-height: 100vh 来防止这种情况，但这似乎根本没有做任何事情
这是 iPhone
上的页面
一切看起来都很好，就像他们应该的那样...
直到您向下滚动
那就是事情变得有点奇怪的时候...
似乎，至少在 iPhone 上的 safari 中，100vh 考虑到了底部导航栏，但 slider.footer 的绝对定位却忽略了它并将其自身设置为Safari 底部导航栏的顶部。我明白为什么苹果会这样做，因为默认情况下导航栏始终存在，直到您向下滚动，但这显然导致了我正在尝试完成的问题...
我认为这是一个 iPhone / Safari 问题是否正确，还是我的 html/css 技能还差得远？
你可以试试这个：
body {
margin: 0px;
margin-bottom: 150px;
}
我会这样做：
.slider {
height: calc(100vh - 150px);
}
希望这对您有所帮助:)
另一种方法是：
.page-wrapper { position: relative }
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 150px;
}
希望这（最终）对您有所帮助:)
我正在尝试创建底部带有页脚的全屏滑块。使滑块全屏显示很容易，但向其添加 "footer" 似乎并不容易（对我而言）。例如，滑块将包含一张照片，其下方的 div 将包含有关照片的详细信息，在所有设备上都应显示为 "landing page" 而无需滚动。
我的大脑告诉我创建一个 100vh 的包装器容器以填充 100% 的视图高度，然后创建页脚 - 对于这个例子 - 在 150px 的设定高度，然后让滑块填充包装容器中剩余的差异，理论上似乎是正确的，但我似乎无法弄清楚如何在不使用脚本的情况下实际执行此操作。我对脚本没意见，只是想知道是否有一种纯粹的 css 方法来完成我想要完成的事情。
在这个具体的例子中，我已经尝试在页脚 div 上使用绝对定位，底部为 0 以紧靠主包装器的底部，这有点儿有效（在移动设备上尤其不稳定 iPhone 由于底部导航栏），但自然地由于绝对位置似乎起作用的方式，在滑块 div 上设置 100% 高度将忽略页脚 div 并将其高度设置为 100%包装容器。
是否可以设置 bottom: 0，同时让滑块 div 不与绝对定位的页脚 div 重叠？
是否有更好的方法使用纯 css 一起完成这一切？我是不是疯了？
这是我要完成的工作的图表
建议前的原始代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test page</title>
<meta name="description" content="test page">
<meta name="author" content="Test">
<style>
body {
margin: 0px;
}
.page-wrapper {
height: 100vh;
background-color: red;
}
.slider {
height: 100%;
background-color: blue;
}
.slider-footer {
height: 150px;
background-color: green;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="page-wrapper">
<div class="slider">
</div>
<div class="slider-footer">
</div>
</div>
</body>
</html>
更新/编辑
此外，如下所示，.slider 上的 calc(100vh -150px) 效果更好。它在桌面上运行得非常好，但在我的 iPhone 上运行时，就不是那么好了。
更新样式代码
<style>
body {
margin: 0px;
}
.page-wrapper {
height: 100vh;
max-height: 100vh;
background-color: red;
}
.slider {
background-color: blue;
height: calc(100vh - 150px);
max-height: calc(100vh - 150px);
}
.slider-footer {
height: 150px;
background-color: green;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
iPhone 似乎在自动调整视图，因为设备上的 safari 导航按钮较低。看起来它将 .page-wrapper 向下拉伸得比它应该的更远。我试图通过向 .page-wrapper 添加 max-height: 100vh 来防止这种情况，但这似乎根本没有做任何事情
这是 iPhone
上的页面一切看起来都很好，就像他们应该的那样...
直到您向下滚动
那就是事情变得有点奇怪的时候...
似乎，至少在 iPhone 上的 safari 中，100vh 考虑到了底部导航栏，但 slider.footer 的绝对定位却忽略了它并将其自身设置为Safari 底部导航栏的顶部。我明白为什么苹果会这样做，因为默认情况下导航栏始终存在，直到您向下滚动，但这显然导致了我正在尝试完成的问题...
我认为这是一个 iPhone / Safari 问题是否正确，还是我的 html/css 技能还差得远？
你可以试试这个：
body {
margin: 0px;
margin-bottom: 150px;
}
我会这样做：
.slider {
height: calc(100vh - 150px);
}
希望这对您有所帮助:)
另一种方法是：
.page-wrapper { position: relative }
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 150px;
}
希望这（最终）对您有所帮助:)