2

一般的なコンテナ内に「下」のコンテンツ 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 を使用していますか? クローム/ファイアフォックス? スペック?

簡単なチェックでは、パディングが一貫して機能する可能性があることが示されていますが、マージンを使用したい場合 (つまり、背景が機能する場合) には理想的ではありません。

4

2 に答える 2

0

Android ブラウザーでも同じ問題が発生し、子要素にマージンを設定することで解決できました。

.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
}
.bottom-child {
    height:100%;
    margin-bottom: 5%;
    background: #000;
}

重要なのは、絶対配置された要素にマージンを設定しないことです。

于 2013-07-24T17:43:25.323 に答える