4

誰かがこれの回避策を知っていますか？

divの幅を計算しようとしています：

#container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    display: none;
    background: #fff;
    width: calc(100% - 1em);
    padding: .5em;
}
4

1 に答える 1

5

編集2：

これは、Chrome の最新リリースでテストされ、完全に機能する Webkit ブラウザーのバージョンです (コメントで尋ねられます): http://jsfiddle.net/HvVst/1/

-webkit-calc()の代わりに使用されますcalc()。

編集: 次に、次のように、1px の境界線を 0.5em のパディングに差し引く必要があります: http://jsfiddle.net/HvVst/

HTML:

<div id="banner">
   FIXED HEADER
</div>
<div id="main">
    normal div
    <br/>
    Sample Text 1
    <br/>
    Sample Text 2
    <br/>
    Sample Text 3
    <br/>
    Sample Text 4
    <br/>
    Sample Text 5
    <br/>
    Sample Text 6
    <br/>
    Sample Text 7
    <br/>
    Sample Text 8
</div>

CSS:

#banner{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background: #fff;
    width: calc(100% - 1em);
    padding: calc(0.5em - 1px); /* <-- THIS ONE !!*/
    border: 1px solid red;
    height: 50px;
}

#main{
    margin-top: calc(50px + 1em);
    border: 1px solid blue;
    height: 500px;
}

これは位置固定/絶対で動作しますが、(相対親が絶対に指定されておらず、常に固定に指定されていない場合)、コンテナーの幅ではなく、ウィンドウの幅を参照します。

(100% - 1em) = スクロールバーを除くウィンドウの 100%...

あなたは何を達成しようとしていますか？

親の境界で絶対位置が必要な場合は、親を position:relative... に設定します。

于 2012-10-29T12:59:25.850 に答える