使填充底部百分比来自高度而非宽度

我试图实现一个设计，当你进行滚动时，主要元素从画布上消失。当然是回应。

我觉得这很容易做到。

main{ 
    padding-bottom: 100%; 
}

其中，我想在元素下创建空间等于其高度的100％。它没有。于是，一些元素检测，并在规范某些读了之后，我发现这个恐怖：

“的百分比计算相对于生成的框的包含块的宽度请注意，这是真实的“。边缘顶部'和'边缘底部'。“ - W3C

这让我大跌眼镜。我发现this question问为什么虽然我不满意答案，但我不打算重复这个问题。

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

从对该问题的其他评论之一，我调查试图改变问题的元素流向垂直。

“根据“上请注意，在水平流中，百分比‘边距’和‘边距’它指出dev.w3.org/csswg/css3-box/#the-margin-properties与包含块的宽度有关，而不是高度（并且在垂直流动中，'margin-left'和'margin-right'是相对于高度而不是宽度）。所以它是双向的。“ - 亚当斯威尼

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

所以是的，我开始认为这可能在CSS中是不可能的，但对我而言，这只是心理。

感谢您的任何建议。

来源

2013-07-03 sanjaypoyzer

然后缠绕到相同大小的包含块。 – zeroflagL

当它仍然只使用它父母的高度时，这会有什么帮助？ – sanjaypoyzer

这就是关键，不是吗？ – zeroflagL

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

只是一个想法。

来源

2013-07-04 08:18:55

nope。不起作用。 – sanjaypoyzer

你能显示一些代码吗？我会帮助弄清楚你想达到的目标。 –

好的我已经解决了我的问题与一个伪元素，所以我会发布我是如何做到这一点的情况下，如果任何人有完全相同的问题，但我会留下更广泛的问题获取基于百分比填充&边距如预期的那样工作尚未解决。

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

所以，我这样做：

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

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

来源

2013-07-11 10:02:37 sanjaypoyzer

使填充底部百分比来自高度而非宽度

回答

相关问题