如何在css中將我的漸變背景設置爲頁面的完整寬度和高度？

Question

我剛剛下載示例頁面從bootstrap，從here

它被設計成沒有滾動條和全部內容只有一頁紙的拍攝。現在

，我也發現了動態梯度換here

我想用梯度換引導封面上的例子。

自舉封面有CSS：

html, 
body { 
    height: 100%; 
} 

和梯度換有：

body{ 
    background-color: #000000; 
    padding: 0px; 
    margin: 0px; 
} 

#gradient 
{ 
    width: 100%; 
    height: 800px; 
    padding: 0px; 
    margin: 0px; 
} 

，你可以看到 '#gradient' 有height: 800px，所以它不會覆蓋垂直頁面爲100％。我如何修改此代碼以使高度覆蓋100％？

Answer 1

這：

緊裹div內的模板代碼（I給它的ID #gradient），然後設置width和height它。其他內容與CodePen和Bootstrap Cover模板相同。

#gradient { 
    width: 100vw; 
    height: 100vh; 
} 

var colors = new Array(
 
    [62,35,255], 
 
    [60,255,60], 
 
    [255,35,98], 
 
    [45,175,230], 
 
    [255,0,255], 
 
    [255,128,0]); 
 

 
var step = 0; 
 
//color table indices for: 
 
// current color left 
 
// next color left 
 
// current color right 
 
// next color right 
 
var colorIndices = [0,1,2,3]; 
 

 
//transition speed 
 
var gradientSpeed = 0.002; 
 

 
function updateGradient() 
 
{ 
 
    
 
    if ($===undefined) return; 
 
    
 
var c0_0 = colors[colorIndices[0]]; 
 
var c0_1 = colors[colorIndices[1]]; 
 
var c1_0 = colors[colorIndices[2]]; 
 
var c1_1 = colors[colorIndices[3]]; 
 

 
var istep = 1 - step; 
 
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]); 
 
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]); 
 
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]); 
 
var color1 = "rgb("+r1+","+g1+","+b1+")"; 
 

 
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]); 
 
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]); 
 
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]); 
 
var color2 = "rgb("+r2+","+g2+","+b2+")"; 
 

 
$('#gradient').css({ 
 
    background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({ 
 
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}); 
 
    
 
    step += gradientSpeed; 
 
    if (step >= 1) 
 
    { 
 
    step %= 1; 
 
    colorIndices[0] = colorIndices[1]; 
 
    colorIndices[2] = colorIndices[3]; 
 
    
 
    //pick two new target color indices 
 
    //do not pick the same as the current one 
 
    colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length; 
 
    colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length; 
 
    
 
    } 
 
} 
 

 
setInterval(updateGradient,10);

/* 
 
* Globals 
 
*/ 
 

 
/* Links */ 
 
a, 
 
a:focus, 
 
a:hover { 
 
    color: #fff; 
 
} 
 

 
/* Custom default button */ 
 
.btn-default, 
 
.btn-default:hover, 
 
.btn-default:focus { 
 
    color: #333; 
 
    text-shadow: none; /* Prevent inheritance from `body` */ 
 
    background-color: #fff; 
 
    border: 1px solid #fff; 
 
} 
 

 

 
/* 
 
* Base structure 
 
*/ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    background-color: #333; 
 
} 
 
body { 
 
    color: #fff; 
 
    text-align: center; 
 
    text-shadow: 0 1px 3px rgba(0,0,0,.5); 
 
} 
 

 
/* Extra markup and styles for table-esque vertical and horizontal centering */ 
 
.site-wrapper { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; /* For at least Firefox */ 
 
    min-height: 100%; 
 
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); 
 
    box-shadow: inset 0 0 100px rgba(0,0,0,.5); 
 
} 
 
.site-wrapper-inner { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.cover-container { 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
/* Padding for spacing */ 
 
.inner { 
 
    padding: 30px; 
 
} 
 

 

 
/* 
 
* Header 
 
*/ 
 
.masthead-brand { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.masthead-nav > li { 
 
    display: inline-block; 
 
} 
 
.masthead-nav > li + li { 
 
    margin-left: 20px; 
 
} 
 
.masthead-nav > li > a { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    color: #fff; /* IE8 proofing */ 
 
    color: rgba(255,255,255,.75); 
 
    border-bottom: 2px solid transparent; 
 
} 
 
.masthead-nav > li > a:hover, 
 
.masthead-nav > li > a:focus { 
 
    background-color: transparent; 
 
    border-bottom-color: #a9a9a9; 
 
    border-bottom-color: rgba(255,255,255,.25); 
 
} 
 
.masthead-nav > .active > a, 
 
.masthead-nav > .active > a:hover, 
 
.masthead-nav > .active > a:focus { 
 
    color: #fff; 
 
    border-bottom-color: #fff; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .masthead-brand { 
 
    float: left; 
 
    } 
 
    .masthead-nav { 
 
    float: right; 
 
    } 
 
} 
 

 

 
/* 
 
* Cover 
 
*/ 
 

 
.cover { 
 
    padding: 0 20px; 
 
} 
 
.cover .btn-lg { 
 
    padding: 10px 20px; 
 
    font-weight: bold; 
 
} 
 

 

 
/* 
 
* Footer 
 
*/ 
 

 
.mastfoot { 
 
    color: #999; /* IE8 proofing */ 
 
    color: rgba(255,255,255,.5); 
 
} 
 

 

 
/* 
 
* Affix and center 
 
*/ 
 

 
@media (min-width: 768px) { 
 
    /* Pull out the header and footer */ 
 
    .masthead { 
 
    position: fixed; 
 
    top: 0; 
 
    } 
 
    .mastfoot { 
 
    position: fixed; 
 
    bottom: 0; 
 
    } 
 
    /* Start the vertical centering */ 
 
    .site-wrapper-inner { 
 
    vertical-align: middle; 
 
    } 
 
    /* Handle the widths */ 
 
    .masthead, 
 
    .mastfoot, 
 
    .cover-container { 
 
    width: 100%; /* Must be percentage or pixels for horizontal alignment */ 
 
    } 
 
} 
 

 
@media (min-width: 992px) { 
 
    .masthead, 
 
    .mastfoot, 
 
    .cover-container { 
 
    width: 700px; 
 
    } 
 
} 
 

 

 
#gradient { 
 
    width: 100%; 
 
    height: 100vh; 
 
}

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
 

 
<div id="gradient"> 
 

 
    <div class="site-wrapper"> 
 

 
    <div class="site-wrapper-inner"> 
 

 
     <div class="cover-container"> 
 

 
     <div class="masthead clearfix"> 
 
      <div class="inner"> 
 
      <h3 class="masthead-brand">Cover</h3> 
 
      <nav> 
 
       <ul class="nav masthead-nav"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li><a href="#">Features</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
       </ul> 
 
      </nav> 
 
      </div> 
 
     </div> 
 

 
     <div class="inner cover"> 
 
      <h1 class="cover-heading">Cover your page.</h1> 
 
      <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p> 
 
      <p class="lead"> 
 
      <a href="#" class="btn btn-lg btn-default">Learn more</a> 
 
      </p> 
 
     </div> 
 

 
     <div class="mastfoot"> 
 
      <div class="inner"> 
 
      <p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 

 
    </div> 
 

 
    </div> 
 

 
</div>

Answer 2

我發現的最好的方法是使用一個div和風格此，如下所示：

#div{ 
    background: #colour; 
    background: -webkit-linear-gradient(left top, #colour, #colour); 
    background: -o-linear-gradient(bottom right, #colour, #colour); 
    background: -moz-linear-gradient(bottom right, #colour, #colour); 
    background: linear-gradient(to bottom right, #colour, #colour); 
    height: 100vh; 
    width: 100vw; 
} 

VW是指視口寬度，WH視口寬度的視口的高度和1vw = 1％，1vh =視口高度的1％。

讓我知道這是否適合你，哥們。

Answer 3

請試試這個，按您的要求。

body, html { 
    background-color: #000000; 
    padding: 0px; 
    margin: 0px; 
    height: 100%; 
} 
#gradient { 
    width: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 

演示jsfiddle

Answer 4

這個jQuery功能將使高度加載的頁面屏幕的100％，所以它的響應，太有所有的瀏覽器：

<script> 
$(document).ready(function(e) { 
    var wheight = $(window).height(); 
    $('#gradient').css("min-height", wheight); 
}); 
</script>