div не прокручивается при фиксированном body

262

29 сентября 2017, 17:59

весь мозг уже сломал... задача: закрепить фоновое изображение для body, а в центре поместить какой-нибудь текст, чтобы текст был длиннее, чем высота экрана, и соответственно была полоса прокрутки, но чтобы фон оставался неподвижным. проблема в том, что текст выходит за границы экрана и полоса прокрутки не появляется. мне нужно, чтобы размер текста устанавливался в 4vh, например.

<html>
<head>
</head>
<body>
    <div>
    тут например стих пушкина
    мороз и солнце, день чудесный</br>
    еще ты дремлешь, друг прелестный</br>
и так далее...
    </div>
</body>

Answer 1

body { 
  background: linear-gradient(red, blue); 
  background-attachment: fixed; 
}

<main> 
весь мозг уже сломал... задача: закрепить фоновое изображение для body, а в центре поместить какой-нибудь текст, чтобы текст был длиннее, чем высота экрана, и соответственно была полоса прокрутки, но чтобы фон оставался неподвижным. проблема в том, что текст выходит за границы экрана и полоса прокрутки не появляется. мне нужно, чтобы размер текста устанавливался в 4vh, например. 
весь мозг уже сломал... задача: закрепить фоновое изображение для body, а в центре поместить какой-нибудь текст, чтобы текст был длиннее, чем высота экрана, и соответственно была полоса прокрутки, но чтобы фон оставался неподвижным. проблема в том, что текст выходит за границы экрана и полоса прокрутки не появляется. мне нужно, чтобы размер текста устанавливался в 4vh, например. 
весь мозг уже сломал... задача: закрепить фоновое изображение для body, а в центре поместить какой-нибудь текст, чтобы текст был длиннее, чем высота экрана, и соответственно была полоса прокрутки, но чтобы фон оставался неподвижным. проблема в том, что текст выходит за границы экрана и полоса прокрутки не появляется. мне нужно, чтобы размер текста устанавливался в 4vh, например. 
весь мозг уже сломал... задача: закрепить фоновое изображение для body, а в центре поместить какой-нибудь текст, чтобы текст был длиннее, чем высота экрана, и соответственно была полоса прокрутки, но чтобы фон оставался неподвижным. проблема в том, что текст выходит за границы экрана и полоса прокрутки не появляется. мне нужно, чтобы размер текста устанавливался в 4vh, например. 
</main>

Answer 2

* { 
  box-sizing: border-box; 
} 
 
html, body, main { 
  height: 100%; 
  margin: 0; 
} 
 
body { 
  background: linear-gradient(red, blue); 
} 
 
main { 
  overflow: auto; 
  padding: 8px; 
}

<main> 
весь мозг уже сломал... задача: закрепить фоновое изображение для body, а в центре поместить какой-нибудь текст, чтобы текст был длиннее, чем высота экрана, и соответственно была полоса прокрутки, но чтобы фон оставался неподвижным. проблема в том, что текст выходит за границы экрана и полоса прокрутки не появляется. мне нужно, чтобы размер текста устанавливался в 4vh, например. 
весь мозг уже сломал... задача: закрепить фоновое изображение для body, а в центре поместить какой-нибудь текст, чтобы текст был длиннее, чем высота экрана, и соответственно была полоса прокрутки, но чтобы фон оставался неподвижным. проблема в том, что текст выходит за границы экрана и полоса прокрутки не появляется. мне нужно, чтобы размер текста устанавливался в 4vh, например. 
весь мозг уже сломал... задача: закрепить фоновое изображение для body, а в центре поместить какой-нибудь текст, чтобы текст был длиннее, чем высота экрана, и соответственно была полоса прокрутки, но чтобы фон оставался неподвижным. проблема в том, что текст выходит за границы экрана и полоса прокрутки не появляется. мне нужно, чтобы размер текста устанавливался в 4vh, например. 
весь мозг уже сломал... задача: закрепить фоновое изображение для body, а в центре поместить какой-нибудь текст, чтобы текст был длиннее, чем высота экрана, и соответственно была полоса прокрутки, но чтобы фон оставался неподвижным. проблема в том, что текст выходит за границы экрана и полоса прокрутки не появляется. мне нужно, чтобы размер текста устанавливался в 4vh, например. 
</main>