Question

我正在尝试为我的网站背景添加渐变。不幸的是，我无法将渐变扩展到页面底部。最终结果如下：

enter image description here

我突出显示边缘以说明图片中浏览器的边框。这是一个ASP MVC站点，所以我使用共享布局页面。这是该文件中的完整html / razor：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/typeahead.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Determine which links to show in navbar
            window.onload = function () {
                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("CheckSecurity", "Home")',
                    dataType: 'json',
                    success: function (data) {
                        if (data == "viewer" || data == "NA") {
                            $('#Review').hide();
                            $('.Admin').hide();
                        } else if (data == "modifier") {
                            $('.Admin').hide();
                        }
                    }
                });
            };
        })
    </script>
</head>
    <body>
        <div id="background-wrapper">
            @using Monet.Common        
            <div class="page">  
                @Html.Partial("NavBarPartial")
                <img src="@Url.Content("~/Content/images/TEST2body_top.png")" id="topPic" alt="tag" />      
                <section id="main">            
                    @RenderBody()
                </section>
                <footer>
                    <span style="color: Gray;"> </span>
                </footer>
            </div>            
        </div>
    </body>
</html>

这是我正在使用的CSS

#background-wrapper {
    background: rgb(235,241,246); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(235,241,246,1) 19%, rgba(235,241,246,1) 68%, rgba(171,211,238,1) 95%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,rgba(235,241,246,1)), color-stop(68%,rgba(235,241,246,1)), color-stop(95%,rgba(171,211,238,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(235,241,246,1) 19%,rgba(235,241,246,1) 68%,rgba(171,211,238,1) 95%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(235,241,246,1) 19%,rgba(235,241,246,1) 68%,rgba(171,211,238,1) 95%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(235,241,246,1) 19%,rgba(235,241,246,1) 68%,rgba(171,211,238,1) 95%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(235,241,246,1) 19%,rgba(235,241,246,1) 68%,rgba(171,211,238,1) 95%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#abd3ee',GradientType=0 ); /* IE6-9 */
    height: 100%;
    width: 100%;   
}

header,
footer,
nav,
section {
    display: block;
}

.page 
{
    width: 1000px;/*75em;/*83.7em;*/
    margin-left: auto;
    margin-right: auto;
}

#main 
{
    background-image: url('Images/TEST2body_rpt.png');
    background-repeat: repeat-y;
    clear: both;  /*add this so tabs go left! */
    padding: 15px 15px 15px 30px; /*30px 30px 15px 30px; */
    background-color: #fff;
    /*border-radius: 4px 0 0 0;*/
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
    background-position: 0 10px;
}

有没有人知道如何设置渐变，以便最纯净的颜色始终位于浏览器的底部，无论其大小如何？前端设计非常新，所以任何提示/建议将不胜感激？

Answer 1

尝试：

html,body{height:100%;width:100%;}

DEMO here.

无法将渐变扩展到浏览器的底部

1 个答案: