無法將漸變擴展到瀏覽器底部

我正在嘗試向我的網站背景添加漸變。不幸的是，我無法將漸變擴展到頁面的底部。最後的結果是這樣的：無法將漸變擴展到瀏覽器底部

enter image description here

我強調的邊緣，說明在PIC瀏覽器的邊界。這是一個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>

，這裏是我使用

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

有誰知道如何設置梯度，使得最堅實的顏色是一致的CSS在瀏覽器的底部，不管它的大小？非常新的前端設計，所以任何提示/建議將不勝感激？

來源

2013-12-10 NealR

嘗試：

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

DEMO here.

來源

2013-12-10 17:55:58 Hiral

你搖滾，謝謝！ – NealR

@NealR歡迎:) – Hiral

無法將漸變擴展到瀏覽器底部

回答

相關問題