Question

现在肯定有一个WTF时刻。

我正在尝试实现一个设计，当你继续向上滚动时，主要元素会离开画布。当然还是相应的。

我认为这样做很容易。

main{
  padding-bottom: 100%;
}

其中，我想在元素下方创建的空间等于其高度的100％。它没有。然后，经过一些元素检查，以及一些阅读规范后，我发现了这个恐怖：

“百分比是根据生成的包含块的宽度计算的。请注意，对于'margin-top'和'margin-bottom'也是如此。” - W3C

这引起了我的注意。我发现this question要求为什么，虽然我对那里的答案不满意，但我不打算复制这个问题。

我想知道的是如何解决这种奇怪的问题？

关于该问题的其他评论之一，我调查了试图将有问题的元素的流程更改为垂直。

“根据dev.w3.org/csswg/css3-box/#the-margin-properties它声明'注意，在横向流量中，'margin-top'和'margin-bottom'的百分比是相对于包含块的宽度，而不是高度（在垂直流动中，“margin-left”和“margin-right”是相对于高度而不是宽度）。所以它是双向的。“ - Adam Sweeney

所以我尝试添加writing-mode: vertical-rl;，但这似乎没有改变任何东西。不确定为什么，因为我认为它至少可以旋转我的文字或其他东西，但没有变化。

所以是的，我开始认为这在CSS中根本不可能，但对我来说，这只是精神上的。

感谢您的任何建议。

Answer 1

.main {
   position: relative;
   bottom: 100%;
 }

只是一个想法。

Answer 2

好的，我已经用伪元素解决了我的问题，所以我会发布我是如何在这里做的，万一有人有完全相同的问题，但我会留下更广泛的问题，获得基于百分比的填充＆amp;预期尚未解决的利润率尚未解决。

我想在main元素下创建一个等于main元素高度的空间。

所以，我这样做了：

<div id="wrapper">
<main>Content</main>
</div>

#wrapper{
 height: 100%;
 width: 100%;
}
main:after{
height: 100%;
width: 100%;
position:absolute;
}

填充底部百分比来自高度而不是宽度

2 个答案: