使填充底部百分比來自高度而非寬度

我試圖實現一個設計，當你進行滾動時，主要元素從畫布上消失。當然是迴應。

我覺得這很容易做到。

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

使填充底部百分比來自高度而非寬度

回答

相關問題