javascript - 不使用 JS 的 HTML/CSS + 具有各种高度内容的幻灯片

Question

基本上，我想要一个由包含幻灯片的幻灯片组成的页面，其中有一个需要跨越浏览器/窗口的整个高度的 div 元素，无论该 div 是否包含使其跨越的内容整个高度。

此外，内容应以固定宽度居中。

问题是，为了让 div 跨越整个高度，但动态跨越更多(取决于内容)，你需要有 min-height: 100%;但是，min-height: 100% 要求父级具有特定高度，在这种情况下必须为 100% 才能覆盖整个浏览器/窗口。但是，这使得父级具有固定高度，这不是首选，因为滚动 - 相反它也应该具有 min-height: 100% - 但是我们需要从中删除 height: 100% 属性，这将破坏原始 div 的行为。

附言。需要 JavaScript 来改变大小的解决方案是行不通的。需要纯 CSS 解决方案

抱歉，如果它很困惑 - 如果您有任何问题，我很乐意解释更多。

谢谢

Answer 1

您可以通过为顶部和底部指定 0 来绝对定位元素并强制它跨越包含它的元素的整个高度:

div.slide {
   bottom: 0;
   position: absolute;
   top: 0;
}