4

Поиск постоянно выкидывает на "как растянуть на всю высоту окна". Мне же нужно, чтоб растягивалось на высоту страницы. Сейчас же страница имеет фон лишь в начале, а при скролле все убегает..

<!DOCTYPE html>
<html>
<head>
	<title></title>

	<style>
		.back{
			height:100%;
			width:100%;
			position: absolute;
			background-color: yellow;
			top:0px;
      padding: 10px;
		}
		.canv{
			height:100%;
			width:95%;			
			background-color: green;			
		}
		
		.section{
			height:300px;
			border: 5px solid red;
			margin: 10px;
		}
	</style>

</head>
<body>
<div class="back"><canvas class="canv"></canvas></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>

</body>
</html>

1
  • В общем, не нашел ничего лучше, чем JSом подгонять размеры по событию "resize". Костыль( Commented 6 июл. 2017 в 8:46

1 ответ 1

3

Задавая блоку с классом .back свойство position: fixed; и высоту 100% то его высота будет всегда ровной видимой части страницы. Я поменял высоту convas в 90%-ов что бы наглядно видно было это (эту высоту вы потом сделайте опять равной 100% если вам так будет нужно). И у вас convas всегда будет в видимой части страницы, и его размеры то же будут пропорциональны размерам видимой части страницы.

<!DOCTYPE html>
<html>
<head>
	<title></title>

<style>
    .back{
        height:100%; 
        width:100%;
        position: fixed;
        z-index: -1;
        background-color: yellow;
        top:0px;
        padding: 10px;
    }
    .canv{
        height:90%;
        width:95%;			
        background-color: green;			
    }

    .section{
        height:300px;
        border: 5px solid red;
        margin: 10px;
    }
</style>

</head>
<body>
    <div class="back">
        <canvas class="canv"></canvas>
    </div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</body>
</html>

6
  • Вместо "Вам так нужно да?" лучше писать что-то вроде "Вам нужно выставить канвасу position: fixed"
    – Darth
    Commented 29 июн. 2017 в 8:21
  • @Darth Так то же можно Commented 29 июн. 2017 в 8:22
  • нет, мне нужна прокрутка фона вместе со страницей. Прибить гвоздями я умею) Commented 29 июн. 2017 в 8:23
  • @user3444737 А фон должен быть во всей видимой части страницы? или меньше? Commented 29 июн. 2017 в 8:25
  • @user3444737 Для .back если я вас правильно понял надо поставить определенную высоту. Commented 29 июн. 2017 в 8:27

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.