Asp.net mvc 无法使渐变延伸到浏览器底部_Asp.net Mvc_Html_Css

Asp.net mvc 无法使渐变延伸到浏览器底部

asp.net-mvc html css

Asp.net mvc 无法使渐变延伸到浏览器底部,asp.net-mvc,html,css,Asp.net Mvc,Html,Css,我正在尝试为我的网站背景添加渐变。不幸的是，我无法将渐变延伸到页面底部。最终结果如下所示：我突出显示了边缘，以说明图片中浏览器的边界。这是一个ASP MVC站点，所以我使用共享布局页面。以下是该文件的完整html/razor： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> &

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

我突出显示了边缘，以说明图片中浏览器的边界。这是一个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>

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

试试看：

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

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