html - 如何使带边框(背景图像)的居中布局和页脚贴在底部？

Question

我已经浪费了很多时间来尝试完成这项工作，但没有成功。 我想要的是有一个 div 页脚并在整个网站周围有一个边框，我使用了 960 像素的居中布局。

我以两个教程为基础:CSS and round corners: Boxes with curves和 How to Use the Sticky Footer Code

如果我定义一个最小高度:100%，页脚就可以了，但是如果需要滚动，边框不会一直向下，如果我设置一个高度:100%，页脚不会停留下来，但边界没问题。

有人能帮忙吗？

主要的html是:

<div id="border">
   <div class="content">...</div>
   <div class="footer">...</div>
</div>

CSS 是:

#border
{
   background: url("../Content/Images/border.png") repeat-y;
   width:978px;
   margin:auto;
   /*min-height:100%;*/
   height: 100%;
}


.footer
   {
    height: 116px;
    width: 960px;
        margin-left:auto;
        margin-right:auto;
        background-image: url("../Content/Images/footer_background.png");
        background-repeat: repeat-x;
        position: relative;
        margin-top: -116px;
        clear: both;
       }
       .content
       {
          min-height:100%;
          width:960px;
          margin:auto;
          background-color: #EAFFE6;
       }

Answer 1

我建议你使用#border div 作为 960px 宽度，然后将带有边框的背景属性添加到整个主体:

body
{
   background: url("../Content/Images/border.png") repeat-y;
}