Как получить градиент CSS3, чтобы охватить высоту всей страницы, а не только область просмотра?

У меня есть градиент CSS с несколькими браузерами, например:

#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 */
}

Но мне нужно, чтобы он охватывал высоту всей страницы, а не только область просмотра. Другими словами, мне нужно применить стиль к элементу с той же высотой, что и вся страница, которая обычно будет body или html.

Дальнейшие осложнения: Я также использую липкий нижний колонтитул, который требует, чтобы html и body были установлены на 100% высоту. Поэтому применение стиля к ним приводит только к заполнению видового экрана.

Я даже не уверен, что то, что я прошу, возможно, но любая помощь будет оценена.

Ответ 1

На основе решения Kyle, а также других стилей из липкого нижнего колонтитула, вот решение, которое наконец-то сработало:

.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%;
}

Со следующим 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>

Ответ 2

html body {
   min-height: 100%;
}

Это будет трюк, свойство min-height охватывает общую высоту, даже если страница прокручивается, но свойство height задает высоту активного порта представления как 100%.

Это работает кросс-браузер!

Ответ 3

Еще один вариант, если вы хотите, чтобы градиент масштабировался ТОЛЬКО для вашего окна просмотра, но поддерживался при прокрутке. Поэтому вместо градиента, отображающего всю высоту документа, он остается относительным только для того, что видно. (Попробуйте, вы увидите, что я говорю)

background-attachment: fixed;

Ответ 4

Вы можете обернуть весь контент страницы в фоновом div, а затем установить его на это. Таким образом, оберточный div заполнит весь ваш контент, а фон будет расширяться по всей странице.

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

Это должно сделать это:)

Ответ 5

вам не нужна оболочка:

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+ */

}

образец 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>

Градиент не будет отображаться, если у вас нет содержимого внутри ваших div!:) Надеюсь, это поможет!

Ответ 6

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 */
}`