Overflow: hidden not working with full viewport sections

Question

I have a set up with several sections that have a full-screen width and height. Whether I position them absolute or relative the overflow still doesn't work.

DEMO

section {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#a {
  background: linear-gradient(1deg, #9f00b8, #2a032d);
  position: absolute;
}

#b {
  background: linear-gradient(1deg, #25cc00, #2a032d);
  left: 100vw;
  position: relative;
}

Still not clear what you want to do? do you want only one section to be visible? or something else ... — Ankit Agarwal, May 05 '16 at 17:51
I don't want it to be able to scroll. I want to use a jquery animate to get to the other section, I don't want it to be viewable otherwise. — Shniper, May 05 '16 at 18:02
@DevStud could you supply a small demo, I've never worked with calc — Shniper, May 05 '16 at 18:04
@Shniper I think you wont this: https://jsfiddle.net/mustafaozturk74/vdghk7u6/2/ — AlwaysStudent, May 05 '16 at 18:05
@DevStud it works in your example and even when I upload my code to a fiddle it works, but when I have it in my root files and open in browser it doesn't. https://jsfiddle.net/3twg23ya/ — Shniper, May 05 '16 at 18:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111155/discussion-between-shniper-and-devstud). — Shniper, May 05 '16 at 18:13

score 1 · Answer 1 · edited May 23 '17 at 12:31

Change your height: 100vh; and width: 100vw;

Like this:

width: 100%;
height: calc(100% - 0px);
// height: 100vh;
// width: 100vw;

And change the following line:

#b {
  background: linear-gradient(1deg, #25cc00, #2a032d);
  //left: 100vw;
   left: 100%;
  position: relative;
}

So i think calc is your solution maybe there are some other solution. Now you need browser support for calc.

width: -webkit-calc(100% - 0px);
width: -moz-calc(100% - 0px);
width: calc(100% - 0px);
height: -webkit-calc(100% - 0px);
height: -moz-calc(100% - 0px);
height: calc(100% - 0px);

I hope it will help.

Working fiddle

If you want to use vh with calc() you can check this answer It is possible to use vh minus pixels in a CSS calc()?

@Shniper i hope it will help. – AlwaysStudent May 05 '16 at 18:40 — AlwaysStudent, May 05 '16 at 18:40

Overflow: hidden not working with full viewport sections

1 Answers1