Используйте блок vh
для этого - так 200px становится 100vh, чтобы заполнить всю высоту экрана.
Но удостоверьтесь, что вы включили min-height
, на время, когда ваш контент больше, чем может отображаться в окне просмотра.
Что касается совместимости этого:
http://caniuse.com/#feat=viewport-units
Firefox: Поддерживается начиная с Firefox 19 (2013)
Chrome: Поддерживается начиная с частично, так как Chrome 20 (2012), общей поддержки, так как Chrome 26 (2013)
Сафари: Поддерживается начиная с частично, так как Safari 6 (2012), общей поддержки, так как Safari 6.1 (2013)
IE: Частичная поддержка, так как IE 9 (2011)
Края: Частичная поддержка, так как Край 12 (2015)
Когда я говорю частичная поддержка, во всех этих случаях является то, что они не поддерживают vmax
, которые вы все равно не используете для этого.
.parallax {
/* The image used */
background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg");
/* Set a specific height */
height: 100vh;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.red {
height: 1000px;
background-color: red;
color: white;
font-size: 40px;
}
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>
<div class="parallax"></div>
<div class="red">
Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
Вы также можете сделать это с помощью JQuery, используя .height()
, чтобы получить высоту окна.
$(document).ready(function() {
wh = $(window).height();
$(".parallax").css({
"height": wh
});
});
.parallax {
/* The image used */
background-image: url("http://az-themes.bluxart.netdna-cdn.com/ibuki/wp-content/uploads/2014/06/blog-img.jpg");
/* Set a specific height */
height: 100vh;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.red {
height: 1000px;
background-color: red;
color: white;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>
<div class="parallax"></div>
<div class="red">
Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
Использование 100vh (единица измерения В.Х. является высота окна просмотра), как высота в CSS. 100 говорит, что он равен 100 и высоте просмотра. У вас также есть vw для ширины. – creativekinetix
Поддержка браузера 'vh': http://caniuse.com/#feat=viewport-units – Sebastian
Это довольно широко поддерживается. Даже в IE вы теряете только часть vmax. Существуют и другие ошибки, связанные с печатью и 3D-преобразованиями, но я не думаю, что это большая проблема. – creativekinetix