CSS3 calc（）不適用於固定位置/絕對位置

我試圖計算一個div的寬度：

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

來源

2012-10-29 Morpheus

我不能回答你的問題，但請注意，這是一個更容易幫助你，如果你發佈你的代碼並詳細說明你的問題。 –

編輯2：

這是版本的Webkit瀏覽器（如詢問意見），與最新的Chrome測試版本，並且完全爲我工作：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％......

什麼是你想達到什麼目的？

如果你想在父母的界限絕對位置，設置父位置：相對...

來源

2012-10-29 12:59:25

我想這div是100％的寬度，我需要減去1em的填充，所以它不會溢出身體，如果這是有道理的。它也必須修復，因爲我希望它位於頁面的頂部。在這種情況下，將父元素設置爲相對位置沒有意義。 – Morpheus

它看起來像webkit瀏覽器不適用於此。謝謝！附：對不起，我在這裏新來的時候不能投票給你答案。 – Morpheus

對不起，我用Firefox測試過，你沒有提到「Webkit瀏覽器」:) 對於webkit瀏覽器，只需使用「-webkit-calc（100％ - 1em）;」而不是「calc（100％ - 1em）;」，對每個使用的calc（）進行替換。如果您認爲這是正確的答案，則您無法投票，但仍可以標記爲「已接受的答案」。 –

CSS3 calc（）不適用於固定位置/絕對位置

回答

相關問題