0
我想要的是擁有一個居中的內容列,其中包含具有長垂直漸變的bg。它很可能會延伸到瀏覽器,但我不希望它創建滾動條。我希望它的行爲就像它的身體背景一樣,只有在瀏覽器較大或內容較多時纔會顯示。嘗試使用bg的div容器垂直延伸而不使用滾動條
我想要的是擁有一個居中的內容列,其中包含具有長垂直漸變的bg。它很可能會延伸到瀏覽器,但我不希望它創建滾動條。我希望它的行爲就像它的身體背景一樣,只有在瀏覽器較大或內容較多時纔會顯示。嘗試使用bg的div容器垂直延伸而不使用滾動條
看起來像你需要這樣的東西。我的示例使用了表格,但您可以嘗試用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"> </td>
<td class="content">
<p>Your contents go here. :)</p>
</td>
<td class="right_side"> </td>
</tr>
</table>
</body>
</html>
這裏的梯度是一個2000高度和1個重量的圖像。漸變從頂部開始,如果瀏覽器的高度超過2000像素(哦,真的?),如「background-color:#fff;」指定,呈現白色。
只有在內容的高度/寬度允許時纔會顯示`background-image` * *。 – 2011-01-23 22:10:19