CSS CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

Amandeep Pasricha
Amandeep Pasricha
14,928 Points

What is implied by a vertical scroll?

When a vertical scroll appears, does this mean that the content is outside of a device's viewport?

3 Answers

Steven Parker
Steven Parker
173,644 Points

That would generally be true for the window itself as long as that behavior has not been overridden.

But you can also have scrollbars on elements. An "auto" scrollbar will appear anytime the content is greater than the nearest containing element, which could potentially be smaller (or larger) than the viewport.

There are also property settings that causes the scrollbar to be visible at all times.

Amandeep Pasricha
Amandeep Pasricha
14,928 Points

Steven Parker Okay so when content is displayed on the iPhone and everything looks fine in terms of padding and width, if there is a vertical scroll, we would say that vertical content is outside of the viewport. But so far, we've been setting width viewports to avoid horizontal scrolls, correct?

Steven Parker
Steven Parker
173,644 Points

I don't recall all the examples in the course, but it's certainly more common for responsive designs to result in a vertical scrollbar but not a horizontal one.

Amandeep Pasricha
Amandeep Pasricha
14,928 Points

Steven Parker But I don't understand what was wrong with the vertical scroll in the first place. Isn't the footer technically still in the browser's viewport? Is the term viewport only concerned with what we can see currently at THIS very moment on the screen? Because I don't see why the footer was not in the browser's viewpoint even when the vertical scroll was required.

In conclusion: would we say that any content that can only be seen with the help of a scroll bar, is outside of the device's viewport?

Steven Parker
Steven Parker
173,644 Points

What I was trying to explain the first time is that there are many causes for a scroll bar, and some are completely unrelated to the viewport size. So having one doesn't imply anything you can rely on.

But you're right, the "viewport" is the visible area of the page, which varies with the device.

Amandeep Pasricha
Amandeep Pasricha
14,928 Points

Steven Parker Okay, in this example, did an "auto" scroll-bar appear as a result of content being shorter than the nearest containing element, which I'm guessing was <body>?

Steven Parker
Steven Parker
173,644 Points

I don't know what you are referring to by "this example".