如何通過擴展空標籤對背景圖片進行分層？

我想分層背景圖片，這樣我就可以用邊框獲得很好的效果。如何通過擴展空標籤對背景圖片進行分層？

我覺得我的代碼很簡單，但我遇到的問題是標籤不想正確擴展。我會在稍後解釋。這裏的HTML：

<!doctype html> 

    <html> 
     <head> 


     <title>My blog</title> 
      <link rel="stylesheet" type="text/css" href="webdev.css"/> 
     </head> 

     <body class='body'> 
      <div class='outer'> 
       <div class='inner'> 
</div> 
      </div> 
     </body> 

    </html>

樣式表：

.body 
{ 
    min-height:100%; 
    width:100%; 
    margin-top:0px; 
    overflow: hidden; 
    display: inline-block; 
    display: block; 
} 

.outer 
{ 
    min-height:100%; 
    width:100%; 
    overflow: hidden; 
    display: inline-block; 
    display: block; 
} 

.inner 
{ 
    min-height:100%; 
    width:100%; 
}

我不是100％肯定的clearfixes是必要的呢。基本上我希望divs不管屏幕大小如何都封裝整個屏幕。感謝任何和所有的迴應。如果我不清楚可以隨意評論，我會解釋更多，但我認爲這個問題是相當基本的。

來源

2011-08-12 Eric Thoma

試試這個：

body 
{ 
    height:100%; 
} 

.outer 
{ 
    height:100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: block; 
} 

.inner 
{ 
    height:100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: block; 
}

來源

2011-08-12 21:03:21 Leah

製作寬度100％作爲設定「寬度：100％」那樣簡單，高度是有點困難..

你需要有「高度：100％」雙方的<html>和<body> - 標籤。然後「高度：自動;高度：100％;最小高度：100％;」你的<div>的

你有兩個「高度」的原因是因爲IE6不理解「高度：自動」，然後需要「高度：100％」來代替。

這裏你可以看到這樣一個例子：http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html

來源

2011-08-12 21:00:15

如何通過擴展空標籤對背景圖片進行分層？

回答

相關問題