2

现在肯定有那些WTF时刻之一。

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

我想这很容易做到。

main{
  padding-bottom: 100%;
}

其中，我认为会在元素下方创建等于其高度 100% 的空间。它没有。然后，在检查了一些元素并阅读了一些规范之后，我发现了这种恐怖：

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

这让我大吃一惊。我发现这个问题在问为什么，虽然我对那里的答案不满意，但我不会重复这个问题。

我想知道的是我怎样才能解决这个奇怪的问题？

从对该问题的其他评论之一，我调查了尝试将相关元素的流动更改为垂直的。

“根据 dev.w3.org/csswg/css3-box/#the-margin-properties，它声明‘请注意，在水平流中，‘margin-top’和‘margin-bottom’的百分比是相对于包含块，而不是高度（在垂直流中，'margin-left' 和 'margin-right' 是相对于高度，而不是宽度）。所以它是双向的。” ——亚当·斯威尼

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

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

感谢您的任何建议。

4

2 回答 2

0

好的，我已经用伪元素解决了我的问题，所以我会在这里发布我是如何做到的，以防万一有人遇到完全相同的问题，但我会留下更广泛的问题，即让基于百分比的填充和边距按预期工作未解决到目前为止。

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

所以，我这样做了：

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

#wrapper{
 height: 100%;
 width: 100%;
}
main:after{
height: 100%;
width: 100%;
position:absolute;
}
于 2013-07-11T10:02:37.517 回答
0 
.main {
   position: relative;
   bottom: 100%;
 }

只是一个想法。

于 2013-07-04T08:18:55.287 回答