그라디언트를 브라우저 하단까지 확장 할 수 없습니다.

웹 사이트의 배경에 그라디언트를 추가하려고합니다. 불행히도 그라디언트를 페이지 하단까지 확장 할 수 없습니다. 최종 결과는 다음과 같습니다 그라디언트를 브라우저 하단까지 확장 할 수 없습니다.

enter image description here

내가 그림에서 브라우저의 테두리를 설명하기 위해 가장자리를 강조했다. 이것은 ASP MVC 사이트이므로 공유 레이아웃 페이지를 사용합니다. 여기

<!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되어 여기에 해당 파일의 전체 HTML/면도기입니다 크기에 관계없이 브라우저 하단에 있습니까? 매우 새로운 프런트 엔드 디자인이므로 팁/제안 사항을 크게 높이 평가할 수 있습니까?

출처

2013-12-10 NealR

시도 :

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

DEMO here.

출처

2013-12-10 17:55:58 Hiral

당신은 바위, 감사합니다! – NealR

@NealR welcome :) – Hiral

그라디언트를 브라우저 하단까지 확장 할 수 없습니다.

답변

관련 문제