允许一个div滚动X量，但然后停止？

Question

我有一个高达700px的div，该div是一张200px的图片。我想允许第一个700px滚动，但没有更多。因此，在较小的垂直分辨率下，用户可以滚动查看第一个700像素，然后其余部分被“切断”。

另一方面，大垂直分辨率的用户将看到700px的div和图片都没有滚动条。

怎么办？

Answer 1

您可以使用CSS媒体查询在不同的窗口大小上使用不同的CSS。

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

所以你想要做这样的事情？

.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; 
    } 
}