當窗口調整大小時嵌套的div父級重疊的孩子

Question

當調整瀏覽器窗口的大小時，content div與logo div是重疊的。有沒有解決方案。我想在調整窗口大小時調整徽標大小。

@charset "utf-8"; 
/* CSS Document */ 

html, body { 
    background-color:#ffffff; 
    margin:0; 
    padding:0; 
    height:100%; 
    width:100%; 
} 

#content { 
    height:74%; 
    background-color:#7d6961; 
    width:100%; 
    position:relative; 
    top: 10%; 
} 

#logo { 
    background-image:url(logo.png); 
    background-repeat:no-repeat; 
    position:absolute; 
    left: 9%; 
    top: 5%; 
    right: 2%; 
    bottom: 21%; 
    width: 77%; 
    height: 65%; 
} 

Answer 1

您必須使用window-DOM對象的resize-callback。

$(window).resize(function() { 
    var _width = $(window).width(), 
     _height = $(window).height(); 

    console.log('width: ' + _width); 
    console.log('height: ' + _height); 
});​ 

結帳這個的jsfiddle一個實例（我把標誌變成一個img標籤，所以它總是完全可見）： http://jsfiddle.net/qY3kM/

純粹的CSS圖像的動態調整是不可能的（ afaik ...也許通過使用css-expressions，但它們很醜，根本不應該使用）。還有用於動態調整大小的jquery插件，但我從未使用過，因此我不推薦使用它。