如何在使用内容框时修复CSS3增强背景？

Question

我正在使用CSS3设计我的第一页，我遇到了一个障碍。我用this question and answer为我的网站创建了一个整洁的背景。这工作得很好，直到我添加了一个内容类。这导致CSS渐变不能完全到达页面的末尾（向下滚动以查看效果）。这是我的CSS：

html{ 
    height: 100% 
} 

body { 
    background: #c5deea; /* old browsers */ 

    background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* firefox */ 

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* webkit */ 

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c5deea', endColorstr='#066dab',GradientType=0); /* ie */ 

    height: 100%; 
    margin: 0; 
    background-repeat: no-repeat; 
} 

#content{ 
    -moz-box-shadow: 0 0 5px #888; 
    -webkit-box-shadow: 0 0 5px#888; 
    box-shadow: 0 0 5px #888; 

    background: white; 
    margin-left: auto; 
    margin-right: auto; 
    padding: .5%; 
    margin-top: 2%; 
    margin-bottom: 2%; 
    width: 50%; 
} 

h1, h2, h3 { 
    color: #066dab; 
} 

谁能告诉我出了什么问题，以及如何解决它？我应该注意到，我对CSS非常陌生，更不用说CSS3;所以，任何见解表示赞赏

Answer 1

像这样做，而不是：

Live Demo

• 我neatened你设置height: 100%的方式。
• 我把margin关闭了#content。
• 为了弥补丢失的margin，我添加了一个额外的包装元素，并给它padding: 2%。