css - パディング/マージンのパーセンテージ-CSSのバグの可能性はありますか？

Question

だから私は横スクロールのサイトを作るのに忙しい。ここで言うコンテナdivには、のクラスがありareaます。div従来のサイトで平均の高さが可変であるのと同じように、幅は可変です。

私のサイトは「垂直方向に反応する」ので、通常のサイトでパーセンテージの幅を使用するのと同じように、高さを含む多くのパーセンテージの値を使用しています。

問題は、パーセンテージのパディング/マージンを使用すると、たとえばdiv.area設定している場合でも、高さではなくdivの幅に基づいてパーセンテージが計算されることです。padding-top

padding-leftこれは、通常のサイトのパーセンテージを設定しbody、サイトの高さに基づいてパディングを計算することに似ています。それはばかげており、完全に直感的ではありません。

これは既知の問題ですか？それとも意図的ですか？また、CSSのみの回避策はありますか。このような問題を解決するためにJSなどを使用する必要はありませんem。

score 5 · Accepted Answer

W3C標準では、パディングとマージンのパーセンテージは、高さではなく、要素の幅のパーセンテージであると規定されています。

パーセンテージは、生成されたボックスを含むブロックの幅に対して計算されます。これは「margin-top」と「margin-bottom」にも当てはまることに注意してください。含まれているブロックの幅がこの要素に依存している場合、結果のレイアウトはCSS2.1では定義されていません。

ただし、位置topとbottom位置はコンテナの高さによって決まります;）CSSのみの方法はありませんが、JSを投入する場合は、それは完全に可能です。

私が考えることができるいくつかの解決策（網羅的ではないリスト）：

score 0 · Accepted Answer

同じ問題に遭遇しただけです。私のために働く解決策：

幅/高さを設定して使用しないでください

.percent10 {
  top: 10%;
  left: 10%;
  bottom: 10%;
  right: 10%;
}

2 に答える 2