So basically I have been trying to put the scrollable area down in my product landing page. I made a dummy page that pushes the scrollable area down and does not include the nav bar/header. It is pushed down when I open a basic html file in Chrome, but it is not pushed down in Codepen.io. Seems like the scroll bar from codepen is overriding mine.
My site that I am trying to fix:
Not sure exactly what your asking. I made a three section layout where only section 3 scrolls. https://codepen.io/tlc35us/pen/GVpVxY I noticed that before I put content in it I could turn on the scroll bar but it was empty because of lack of content and it was still the outer edge like it was the main browser window. In the site you’re trying to fix you have two parallel scroll bars, but only one has a handle( the outer one). Because your
calc is basically 100% of the viewport height and there is no content after the scrollable section’s closing tag, you don’t see a scrolling section in the middle of your page.
I changed your
height:120vh; which gave me a handle on the inner scrollbar so now you have to bars to scroll to see your page, but there still is no content after the scrollable section.
Let me try to reword myself. Basically you noticed that there are two parallel scroll bars. I just want only one scroll bar, but for some reason codepen.io added their own scrollbar to the right. If you see from the picture I just added, that is the file if you make your own .html file and open it in Chrome. See that the scroll bar is pushed down the header? The scroll bar is below the header and does not include it. That is what I am trying to achieve with codepen.io.
Ok, so in the first pen you linked to you want it to work the way it stops below codingpen’s header. Well coding pen is the actual webpage and you’re in an iframe. That means your a webpage in a webpage. When you get your real hosting you won’t have to worry about that.
Ohhhh that clears things up. Basically a webpage inside a webpage. Webception. Thanks for clearing things up. Still a beginner. Just working through the curriculum.
Such a long article. I don’t want to take the time to read it.
Okay, so maybe use the
overflow css command and give your text a width and height attribute. It should push your text and create a scrollbar in it.