Невозможно получить градиент для расширения до нижней части браузера

Question

Невозможно получить градиент для расширения до нижней части браузера

0

Я пытаюсь добавить градиент на мой веб-сайт. К сожалению, я не могу заставить градиент перейти к нижней части страницы. Окончательный результат выглядит следующим образом:

Я выделил края, чтобы проиллюстрировать границы браузера на рис. Это сайт ASP MVC, поэтому я использую общую страницу макета. Вот полный html/бритва из этого файла:

<!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;
}

Кто-нибудь знает, как настроить градиент так, чтобы самый сплошной цвет был последовательно внизу браузера, независимо от его размера? Очень новый дизайн переднего конца, поэтому любые советы/предложения были бы весьма полезны?

NealR 10 дек. 2013, в 19:18

Источник

Теги:

html

css

html5

css3

asp.net-mvc

1 ответ

Ещё вопросы

Hiral · Accepted Answer · 2013-12-10T14-56-00.000Z

Пытаться:

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

ДЕМО здесь.