使用内容框时如何修复 CSS3 渐变背景？答案

【问题标题】：How can one fix a CSS3 graident background when using a box for content?使用内容框时如何修复 CSS3 渐变背景？
【发布时间】：2011-03-04 03:00:13
【问题描述】：

我正在使用 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；所以，任何见解都值得赞赏

【问题讨论】：

标签： background css width gradient

【解决方案1】：

改为这样：

Live Demo

我整理了你设置 height: 100% 的方式。
我取消了margin #content。
为了弥补丢失的margin，我添加了一个额外的包装器元素并提供了padding: 2%。

【讨论】：

谢谢。 jsfiddle.com 太棒了！