嘗試使用bg的div容器垂直延伸而不使用滾動條

我想要的是擁有一個居中的內容列，其中包含具有長垂直漸變的bg。它很可能會延伸到瀏覽器，但我不希望它創建滾動條。我希望它的行爲就像它的身體背景一樣，只有在瀏覽器較大或內容較多時纔會顯示。嘗試使用bg的div容器垂直延伸而不使用滾動條

2011-01-23 Adam

只有在內容的高度/寬度允許時纔會顯示`background-image` * *。 – 2011-01-23 22:10:19

看起來像你需要這樣的東西。我的示例使用了表格，但您可以嘗試用div佈局替換它。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta content="text/html; charset=UTF-8" http-equiv="content-type"> 
     <title>aruseni</title> 
     <style type="text/css"> 
body { 
    font-size: 14px; 
    font-family: arial, helvetica, sans-serif; 
    color: #000; 
    background-color: #9b9b9b; 
} 

html, body{ 
    margin:0; 
    padding:0; 
    height:100%; 
    border:none 
} 

a, a:link { 
    font-weight: bold; 
    color: #000; 
} 

a:visited { 
    font-weight: bold; 
    color: #444; 
} 

img { 
    border: 0; 
} 

table.site { 
    border: 0; 
    padding: 0; 
    border-spacing: 0; 
    margin: 0 auto; 
    width: 80%; 
    height: 100%; 
    min-width: 700px; 
} 

tr { 
    vertical-align: top; 
} 

td { 
    padding: 0; 
} 

td.left_side { 
    width: 200px; 
} 

td.right_side { 
    width: 200px; 
} 

td.content { 
    padding: 10px; 
    background-color: #fff; 
    background-image:url('gradient-1x2000.png'); 
    background-repeat: repeat-x; 
    width: 200px; 
} 
     </style> 
    </head> 
    <body> 

     <table class="site"> 
      <tr style="padding: 0px;"> 
       <td class="left_side">&nbsp;</td> 
       <td class="content"> 
        <p>Your contents go here. :)</p> 
       </td> 
       <td class="right_side">&nbsp;</td> 
      </tr> 
     </table> 
    </body> 
</html>

這裏的梯度是一個2000高度和1個重量的圖像。漸變從頂部開始，如果瀏覽器的高度超過2000像素（哦，真的？），如「background-color：#fff;」指定，呈現白色。

來源

2011-01-23 22:14:11 aruseni

嘗試使用bg的div容器垂直延伸而不使用滾動條

回答

相關問題