HTML/CSS + 幻灯片显示各种高度的内容，无需使用 JS

Question

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

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

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

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

抱歉，如果您有任何问题，我很乐意为您解释。

谢谢

Answer 1

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

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