將CSS寬度分配給某個位置：固定元素

我想要一個固定元素的寬度與緊靠其下方的div的寬度相匹配。設想一下標題和主要內容div。在標題和內容div嵌套在外部div內時，會出現匹配寬度的問題。在這種情況下，每個元素的寬度不再與其父元素寬度匹配（例如，<body>標記），而固定元素的寬度基於某些令我困惑的東西。將CSS寬度分配給某個位置：固定元素

爲了更好地解釋我的意思，對比這兩個JS小提琴：

這裏的每個代碼：

<div id="fixed"></div> 
<div id="content"></div> 

#fixed{ position:fixed; z-index:2; width:90%; 
     height:25px; background:yellow;} 
#content{ width:90%; height:300px; background:red}

與

<div id="main"> 
    <div id="fixed"></div> 
    <div id="content"></div>  
</div > 

#main{ width:95%} 
#fixed{ position:fixed; z-index:2; width:90%; 
     height:25px; background:yellow;} 
#content{ width:90%; height:300px; background:red}

注意僅在的jsfiddle＃1做的黃色和紅色的div寬度，無論你如何調整瀏覽器相匹配。不幸的是，jsfiddle＃2更像是一個真實世界的場景，我想知道如何更正id="fixed" div，使其寬度也與id="content" div匹配。

想法？

來源

2012-08-25 tim peterson

檢查下面編輯，纔剛剛看到了備註匹配的寬度。 – CoreyRS

你可以給它這樣FIDDLE（相對於#main％設定）固定元件的尺寸總是相對於根元素計算，所以你需要在你需要這種特殊情況下重置%相應-unit 設置：

#fixed { 
    width: 85.5%; 
}

，區分#main是95％，你的靜態元素是相對於主90％。所以，你需要計算向根元素（1 * .95 * .9 = .855）

來源

2012-08-25 02:54:19 user907860

- @ caligula，謝謝你所說的是兩倍寬度（.95 * .90 = .85.5）的倍數？ –

而且您需要確保正確設置了對象。我只是有一個圖像設置爲對象適合：封面;大小被搞亂了。設置對象適合度：包含;修復。 – Ralf

輕鬆一我的朋友它的寬度。固定寬度的元素從他們的父母被抽出，現在與窗口的寬度相對，所以在這兩種情況下，固定div總是與窗口的大小相關，但是當父容器的寬度不是100％時，固定寬度元素是固定的元素將相對於窗口寬度保持不變，但非固定位置元素現在相對於父寬度。因此，非固定元素成爲窗口95％的90％，而固定元素僅保持窗口的90％。

編輯：

如果要匹配你可以使用jQuery這樣的寬度：

$(function(){ 
    $('#fixed').width($('#content').outerWidth()); 
});

來源

2012-08-25 02:57:52 CoreyRS

沒有辦法做到這一點只使用CSS而不必讓計算器出來？我討厭做JS風格的操作。 –

將CSS寬度分配給某個位置：固定元素

回答

相關問題