Как заставить CSS3 градиент охватывать высоту всей страницы, а не только области просмотра? - PullRequest
Новая
       3

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

13 голосов
/ 11 января 2011

У меня кросс-браузерный 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% высоты. Таким образом, применение стиля к ним приводит к заполнению только области просмотра.

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

Ответы [ 6 ]

8 голосов
/ 11 сентября 2012 
html body {
   min-height: 100%;
}

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

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

6 голосов
/ 11 января 2011

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

.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>
5 голосов
/ 04 мая 2012

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

background-attachment: fixed;
3 голосов
/ 11 января 2011

Вы можете обернуть все содержимое страницы в фоновый 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%;
}

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

2 голосов
/ 06 июня 2011

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

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>

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

0 голосов
/ 18 ноября 2011 
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 */
}`
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...