как растянуть канвас-бекграунд на всю страницу?

297

01 июля 2017, 09:07

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

<!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>

Answer 1

Задавая блоку с классом .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>