Как сделать фон на всю высоту

332

18 марта 2017, 01:16

При уменьшении экрана, появляется вертикальная прокрутка, блок заполняется по высоте на 100% окна браузера, но при скроллинге блок поднимается вверх, тем самым закрывая внизу фоновое изображение. Как сделать чтобы фон был на всю высоту, даже при скроллинге?

Answer 1

Возможно, тебе поможет css свойство overflow

Answer 2

Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера.

Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет.

Выглядеть это будет так:

html { 
/* Растягиваем документ на всю высоту окна */ 
height: 100%; 
overflow: hidden; 
margin: 0; 
padding: 0; 
} 
 
body { 
position: relative; 
/* Растягиваем body по высоте html */ 
min-height: 100%; 
} 
 
aside { 
float: left; 
background: skyblue; 
height: 100%; 
width: 300px; 
overflow: auto; 
} 
 
main { 
overflow: hidden; 
position: absolute; 
top: 0; 
bottom: 20px; 
left: 0; 
right: 0; 
} 
 
article { 
overflow: auto; 
height: 100%; 
background: green; 
} 
 
footer { 
background: #ddd; 
/* Позиционируем footer внизу main */ 
position: absolute; 
bottom: 0; 
width: 100%; 
/* Высота footer */ 
height: 20px; 
}

<body> 
  <main> 
    <aside> 
        sidebar 
    </aside> 
    <article> 
        Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера. 
 
Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет. 
 
Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера. 
 
Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет. 
 
Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера. 
 
Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет. 
 
Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера. 
 
Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет. 
 
Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера. 
 
Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет. 
 
Выглядеть это будет так: 
    </article> 
  </main> 
  <footer> 
   footer 
  </footer> 
</body>