如何在使用內容框時修復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%。