Question

我想要的是一个居中的内容列，其bg具有长垂直渐变。它很可能会延伸到浏览器之外，但我不希望它创建滚动条。我希望它表现得就像它继续存在的身体背景一样，只有在浏览器更大或内容更多时才会显示。

Answer 1

看起来你需要这样的东西。我的示例使用了表，但您可以尝试使用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;”指定的那样，呈现白色。

尝试使用带有bg的div容器在没有滚动条的情况下垂直延伸

1 个答案: