一般的なコンテナ内に「下」のコンテンツ div がある状況があります。この div は (絶対位置で) 一番下にとどまる必要がありますが、コンテナーのベースとの間にパーセンテージのギャップがあります。パーセンテージは、コンテナーの幅に対して相対的である必要があります。
'bottom:5%' は使用できません。これは、位置の小道具が定義するように、これは高さに関連するためです。マージンはどうですか?はい!Chrome .. および Firefox で動作します。ああ、でもSafariではありません。ChromeとSafariはコンテナの幅に基づいて計算し、Safariはコンテナの高さに基づいて計算しているようです。
Chrome と Safari でこのフィドルを見ると、矛盾が見られます。CSS スタイル:
.container {
background: #990000;
width: 345px;
height: 200px;
position: relative;
}
.bottom {
background: #000;
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
margin-bottom: 5%;
}
バグがここにある場所を知っている人はいますか? Safari を使用していますか? クローム/ファイアフォックス? スペック?
簡単なチェックでは、パディングが一貫して機能する可能性があることが示されていますが、マージンを使用したい場合 (つまり、背景が機能する場合) には理想的ではありません。