<body style="margin: 0; padding: 0">
<div style="float: left; width: 50%; height: 3000px; background: pink">1</div>
<div style="float: left; width: 50%; height: 1200px; background: yellow">2</div>
</body>
由于第二个元素比第一个元素短，浏览器通常会继续滚动，直到它到达页面的末尾，从而到达第一个元素的末尾。有没有办法让浏览器在到达第二个元素的末尾时停止垂直滚动，即使页面更长?
(小提琴)我会将它们嵌套在父div中，并设置overflow: hidden
http://jsfiddle.net/WFrSs/1/<!doctype html>
<body style="margin: 0; padding: 0">
<div style="width: 100%; height:1200px; overflow: hidden">
<div style="float: left; width: 50%; height: 3000px; background: pink">1</div>
<div style="float: left; width: 50%; height: 1200px; background: yellow">2</div>
</div>
</body>
使用CSS(或在style属性中)，您可以在第一个元素上使用position: absolute; top: 0; left: 0;，在第二个元素上使用margin-left: 50%;(给第一个元素一些空间)。然后用overflow: hidden样式化容器，在本例中为<body>元素。