Attempting to have a div container with bg extend vertically without scrollbars_问答_开发者

Attempting to have a div container with bg extend vertically without scrollbars

开发者 https://www.devze.com 2023-02-06 13:27 出处：网络

What I want is to have a centered content column that has a bg with a long vertical gradient. It will most likely extend past the browser, h开发者_如何学Cowever I don\'t want it to create scrollbars.

相关专题：css

What I want is to have a centered content column that has a bg with a long vertical gradient. It will most likely extend past the browser, h开发者_如何学Cowever I don't want it to create scrollbars. I want it to act as if it were like the body background where it continues and is only revealed if the browser is larger or there is more content.

Looks like you need something like this. My example used tables, but you can try to replace it with div layout.

<!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>

The gradient here is an image with 2000 height and 1 weight. The gradient starts in the top, and if the browser’s height is more than 2000 pixels (oh, really?), as “background-color: #fff;” specifies, the white colour is rendered.