Question

I have a div that is 700px high, under that div is a 200px picture. I want to allow scrolling for the first 700px but then no more. So on smaller vertical resolutions users can scroll to see the first 700px but then the rest is “cut off”.

On the other hand users on large vertical resolutions will see the 700px div and the picture all with no scrollbar.

How can it be done?

Answer 1

You can use css media queries to use different css on different window size.

@media all and (min-width: 350px) and (min-height: 950px) {
    // css for a window size of 250px height and 750px width or higher
}

So you want to do something like this?

.content {
    height: 700px;
    width: 300px;
}

.main {
    height: 700px;
    width: 100%;
    background-color: red;
}

.pic {
    display: none;
    height: 200px;
    width: 100%;
    background-color: blue;
}

@media all and (min-height: 950px) {
    .content {
        height: 900px;
    }
    .pic {
        display: block;
    }
}