Why doesn't scrolling?

I want to try to move scrolling from the body to the internal element. Why is not working? https://codepen.io/dubx/pen/GdwrXw

Make no mistake - the height dimensions are not known in advance.
June 5th 19 at 21:14
3 answers
June 5th 19 at 21:16
Solution
.content
 width 100%
 height 100vh
 background-color grey
 overflow-y scroll


Like that, but there needs to be content that takes more space than the block

P. S. the Second solution without being tied to VH
<header></header>
<div class="wrapper">
<div class="content">
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
 the <h1>are you content</h1>
</div>
 </div>


body {
overflow:hidden;
height:100%
}
.wrapper {
height:100%;
 position: absolute;
width:100%;
}
header {
 width :100%;
 height :5em;
 background-color :red ;
}
.content{
 background-color: white;
 padding: 10px;
max-height:100%;
position:relative;
overflow-y:auto;
}
Oh, another expert. You content https://codepen.io/dubx/pen/GdwrXw - lesly_Lindgren commented on June 5th 19 at 21:19
What's the problem then? Unit skrollitsya as it should, what claims? That would block started skrollitsya it is necessary that the high-rise block was specifically mentioned and the content should occupy more space than the unit itself.
Yes it is a pity that no cons. - meagan.Bruen54 commented on June 5th 19 at 21:22
, i.e. to become emotionally engaged with the screen size in vh? Other options to make full screen I can't find but still j to calculate popishly the height, which should occupy the unit. - lesly_Lindgren commented on June 5th 19 at 21:25
I don't know how to it is to convey that if he put the car-the height of the scroll would not a priori
and if he does not specify an explicit height of the block and will autovisata - rosamon commented on June 5th 19 at 21:28
I you have 10 again I ask, how do you then propose to put the height of the EPTA. In response to the silence, only some raspberry pained. - lesly_Lindgren commented on June 5th 19 at 21:31
Well, here the problem is that the inner block stretches to the full height of the content, but the body is set to overflow:hidden which cuts off the content. - meagan.Bruen54 commented on June 5th 19 at 21:34
clear is already. How to set the height of the block without using calc? - lesly_Lindgren commented on June 5th 19 at 21:37
Well, not all for you to do. Could even just give a link to themselves to understand what was happening)
and then you 2 options rolled out, and the time is not sorry)

Arevuar) - meagan.Bruen54 commented on June 5th 19 at 21:40
well , so you have nothing for me and did not, only from the righteous path knocked. - lesly_Lindgren commented on June 5th 19 at 21:43
pfft... and walk in his righteousness)
header {
 width :100%;
 height :5%;
 background-color :red ;
}
.content{
 background-color: white;
max-height:95%;
position:relative;
overflow-y:auto;

}

and that you after that would not scagnelli more) - meagan.Bruen54 commented on June 5th 19 at 21:46
June 5th 19 at 21:18
Solution
Because you have no content, there is nothing to scroll .
Brilliant - lesly_Lindgren commented on June 5th 19 at 21:21
You content, the Prodigy https://codepen.io/dubx/pen/GdwrXw

Other suggestions?)) - meagan.Bruen54 commented on June 5th 19 at 21:24
and now, take your same content 2 times increase and to receive the scroll.
you have the block height 5 screens worth, and content on a couple of screens high. Or change the height of the block to 100px and right scrolling you'll see - lesly_Lindgren commented on June 5th 19 at 21:27
lol what do you suggest? Pixel-by-pixel to calculate the size height? That's the unknown variable. Other suggestions? - rosamon commented on June 5th 19 at 21:30
and what do you want I do not understand? you put the block height in 5 screens, filled the content 2умя (approximately )screens, there is something to scroll then? put inside a block height 6экранов, 600vh and you will have scrolling. - lesly_Lindgren commented on June 5th 19 at 21:33
like a genius. 500vh for example, did not clear. The height is not known at all. Changed to AUTO especially for the gifted. It's PPC of some kind. - meagan.Bruen54 commented on June 5th 19 at 21:36
June 5th 19 at 21:20
Solution
The trouble... Told 100500 times that scrolling was necessary to specify the height.
Here: https://codepen.io/anon/pen/ZomyrQ
height: 100% and everything works
And the rules will be in practice, so the absolute pazistami the layout to do? Not to fall apart in the real world, 100500 different devices? Well, just then need to say no from the usual grid goes out. - lesly_Lindgren commented on June 5th 19 at 21:23
Generally a good decision. And it is not necessary to use a vh, which bothered me. - meagan.Bruen54 commented on June 5th 19 at 21:26
100% does not say, but it seems it was not terrible yet. - lesly_Lindgren commented on June 5th 19 at 21:29
they say that these miracles morphing animation do just Absolutes. So they are not to go if you want to make websites that look like native app. It would be necessary to examine this issue, rules on the Absolutes the whole site to keep? - rosamon commented on June 5th 19 at 21:32

Find more questions by tags CSS