最好的辦法元素到另一個元素

我使用的是舊的CSS技巧來獲得一些內容的半透明背景的大小，而不會出現半透明的內容。這裏是HMTL：最好的辦法元素到另一個元素

<div id="frame"> 
    <div id="opacityFrame"> 
    </div> 
    <div id="contentFrame"> 
     <div> 
      <!-- Main Site Content Here --> 
     </div> 
    </div> 
</div>

下面是相應的CSS：

#frame 
{ 
    width: 90%; 
    margin: auto; 
    position: relative; 
    z-index: 0; 
} 

#opacityFrame 
{ 
    background: #00ff00; 
    opacity: .15; 
    top: 0; 
    left: 0; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
} 

#contentFrame 
{ 
    top: 0; 
    left: 0; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    z-index: 1; 
}

我的問題是，由於#frame是位置：相對的，它的高度不與動態內容展開。 #opacityFrame和#contentFrame都被設置爲100％的高度和寬度，並且它們適當地擴展以填充#frame，這很好。問題是，我需要#frame的身高與#contentFrame孩子DIV的內容增長，因爲這DIV的高度動態地放置在它的內容調整。

我最後不得不創建一個jQuery函數：

function resizeFrame() 
{ 
    $('#frame').height($('#contentFrame > div').height()); 
}

注：原因是有孩子的#contentFrameDIV是因爲#contentFrame的身高總是讀零一些奇怪的原因。我假設它的position是absolute。

此代碼可以很好地將#frame的高度調整爲#contentFrame的子女身高DIV。但是，我做了很多ajax來更改DIV中的內容。一種解決方案是使用EVERY ajax事件調用resizeFrame()，但它看起來很乏味。有沒有事件或者我可以綁定的東西會執行這個函數，而不需要我明確地調用它？我嘗試了以下事件，但他們似乎沒有工作;也許我做錯了。

$('#subFrame > div').resize()
$('#subFrame > div').change()

這些都不似乎當孩子DIV的內容進行了修改，開火。任何幫助表示讚賞。也許我正在以這種錯誤的方式去做？我不想爲背景使用透明圖像。

來源

2011-03-15 Chev

「框架」也是一個標籤的名字，所以我建議不使用這個詞的一類，以避免在CSS文件中的混亂。 – 2011-03-16 02:07:35

框架不是一個類，它只是一個ID，通過'＃'顯而易見。 – Chev 2011-03-16 03:43:16

作者很明顯，但對於必須在6個月內更新網站的人來說，這並不明顯。一般來說，不要爲類和ID名稱使用標籤名稱，這只是一個很好的經驗法則。 – 2011-03-16 13:48:29

嘗試採取立場：絕對關閉contentFrame的，但離開它的opacityFrame。這應該會導致它的父級調整大小，並且opacityFrame仍然覆蓋所有內容。

來源

2011-03-15 20:24:26 Hersheezy

我想我嘗試過但不記得。我現在會測試它，看看會發生什麼。 – Chev 2011-03-15 20:25:25

http://jsfiddle.net/28FvM/編輯這個小提琴 – Hersheezy 2011-03-15 20:26:36

啊，是我沒有嘗試這個，'＃opacityFrame'越過'＃contentFrame'的頂部，並沒有'Z-index'調整量將修復它，因爲他們沒有相同的「職位」規則。另請注意，在＃opacityFrame內放置＃＃contentFrame會導致＃contentFrame受到相同的「不透明度」規則的影響。 – Chev 2011-03-15 20:27:50

-1

你必須使用不透明？如果它是純色，請考慮RGBA，或者如果它不是固定的，請考慮使用半透明PNG。這樣你可以嵌套它們。

來源

2011-03-16 02:08:30

我特別聲明，我不想使用圖像來實現這一點。是的，我需要不透明。請參閱http://www.CodeTunnel.com以瞭解實際的實施情況。 – Chev 2011-03-16 03:42:57

最好的辦法元素到另一個元素

回答

相關問題