How to get CSS3 gradient to span the height of the

2019-04-19 09:56发布

站内问答 / HTML/CSS
1928 6 6

I have a cross-browser CSS gradient, such as this:

#background {
    background: #1E5799; /* old browsers */
    background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */
}

But I need it to span the height of the entire page, not just the viewport. In other words, I need to apply the style to an element that has the same height as the entire page, which would usually be body or html.

Further complications: I'm also using the sticky footer, which requires html and body to be set to 100% height. So applying the style to them results in only the viewport being filled.

I'm not even sure if what I'm asking is possible, but any help would be appreciated.

6条回答
何必那么认真
2楼-- · 2019-04-19 10:29 
html, body {line-height:1.5;background:#23538a;

background: -moz-linear-gradient(top,  #ffffff 0%, #23538a 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#23538a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#23538a 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#23538a 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#23538a 50%); /* IE10+ */
background: linear-gradient(top,  #ffffff 0%,#23538a 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
}`
查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
3楼-- · 2019-04-19 10:37

you don't need a wrapper:

CSS:

body{
    width: 100%;
    height:100%;
    background-repeat:no-repeat !important;
    margin:0; padding:0;
    background: #603813; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#28abe2', endColorstr='#ffffff'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#28abe2), to(#ffffff)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #28abe2,  #ffffff); /* for firefox 3.6+ */

}

sample HTML:

<body>

 <div id="headerBG">
  content goes here  content goes here  content goes here  content goes here
  content goes here  content goes here  content goes here  content goes here 
  content goes here  content goes here  content goes here  content goes here
  content goes here  content goes here  content goes here  content goes here 
 </div>

 <div id="container"><!--start container-->
  <div id="content"<!--start content-->
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
   content goes here  content goes here  content goes here  content goes here
  </div><!--end content-->
 </div><!--end container-->

</body>

The gradient won't show if you don't have any content inside your divs! :) Hope this helps!

查看更多
0人赞 添加讨论(0) 举报
ゆ 、 Hurt°
4楼-- · 2019-04-19 10:39

Another option if you want the gradient to scale ONLY to your viewport but be maintained when you scroll. So instead of the gradient plotting the entire height of the document it remains relative only to whats visible. (Try it out you will see what Im saying)

background-attachment: fixed;
查看更多
0人赞 添加讨论(0) 举报
干净又极端
5楼-- · 2019-04-19 10:41 
html body {
   min-height: 100%;
}

It will do the trick, the min-height property spans the total height even if the page is scrollable, but height property sets the height of active view-port as 100%.

This works cross browser!

查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
6楼-- · 2019-04-19 10:44

You could wrap the entire content of the page in a background div, then set it to that. This way the wrapping div will fill up with all your content and the background will expand across the whole page.

HTML:

<body>
<div id="background-wrapper">
<!--all your content-->
</div>
</body>

CSS:

#background-wrapper {
    background: #1E5799; /* old browsers */
    background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */
    height: 100%;
    width: 100%;
}

That should do it :)

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
7楼-- · 2019-04-19 10:47

Based on Kyle's solution, as well as the other styles from the sticky footer, here is the solution that finally worked:

.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -250px;
 background: #1E5799; /* old browsers */
    background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */ } /* corresponds to height of #footer */

#body-wrapper {

    height: 100%;
    width: 100%;
}

With the following html:

<body>
<div id="body-wrapper">
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>
</div>
</body>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)