Question

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

我基于两个教程：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宽度，然后将带有边框的background属性添加到整个身体：

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

如何使用带边框（背景图像）的居中布局，并将页脚粘贴到底部？

1 个答案: