获取背景图像以垂直拉伸

Question

我创建了一个带有条纹图像（62px宽度和32px高度）的简单CSS的网页，我希望它一直垂直重复到页面底部。我的问题是它停止在内容的最后，例如，如果我把“测试”，它将是非常小的。如果我有一篇完整的文章，它将重复 - 但如果页面不滚动则不会太多。

图片：http://avaworld.net/images/bordLeft-blue.png

网站 - http://www.avaworld.net/

#blueWrap { margin: 0; background-color: #131313; padding: 0; display: block; }

#blueRight { padding-right: 62px; background: url(http://avaworld.net/images/bordRight-blue.png) top right repeat-y; }

#blueLeft { padding-left: 62px; background: url(http://avaworld.net/images/bordLeft-blue.png) top left repeat-y; }

<div id="blueWrap">
    <div id="blueRight">
      <div id="blueLeft">
        Test
     </div>
    </div>
</div>

Answer 1

将此应用于您的css

body, #blueWrap, #blueRight, #blueLeft{height:100%;}

Answer 2

body, #blueWrap, #blueRight, #blueLeft{height:100%;}的问题在于，当您有大量内容时，blueRight和blueLeft元素在滚动时不会跟随该页面。

对于blueRight和blueLeft属性，在他们的css中尝试添加：position: fixed; height: 100%;

position: fixed;表示即使滚动，div也会保留在该确切位置。

height: 100%;是使身高达到100％。