100％的寬度

http://jsbin.com/manez/1/100％的寬度

#container { 
    position:absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    margin-left: 50px; 
    background: black; 
    color:white; 
} 
#sidebar { 
    width: 50px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: blue; 
    color: white; 
}

我想一個DIV是width:100%還具有50像素的左緣，但沒有推動在另一端在div 50像素和使水平滾動。

我明白，這將使用jQuery可能：

$('#container').width($(window).width() - 50);

但CSS後，我唯一的解決方案，如果可能的話。

來源

2014-04-28 3zzy

'寬度：計算值（100％ - 50像素）' - 可以使用此[DEMO] （http://jsbin.com/mixorido/1/），更多關於它[這裏]（https://developer.mozilla.org/en-US/docs/Web/CSS/calc） – Ruddy

@Ruddy HOLYC !!我甚至不知道它存在。請給它一個答案。謝謝！ – 3zzy

如果兩個div都是絕對的，那就不要使用寬度。在集裝箱上使用left:50px & right:0。 Div相應地獲得寬度。

來源

2014-04-28 08:09:09 demonofthemist

感謝熱！ ;）驗收限制到期後接受答案 – 3zzy

儘管其他答案同樣令人敬佩，但對於一些較舊的瀏覽器來說，它也更好。 – 3zzy

@Nimbuz謝謝！ – demonofthemist

試試這個：

width : calc(100% - 50px) !important;

來源

2014-04-28 08:12:17 Bip

所以確實是有這樣的事情：width : calc(100% - 50px)。我會建議先閱讀它（有限的瀏覽器支持）。

因此，我們可以用它像這樣：

#container { 
    position:absolute; 
    top:0; 
    left:0; 
    margin-left: 50px; 
    background: black; 
    color:white; 
    width : calc(100% - 50px) 
}

DEMO HERE

此外更多關於它here

來源

2014-04-28 08:14:47 Ruddy

回答

相關問題