两列布局，只有一列可滚动

Question

我需要创建一个两列布局：

1. 左栏有一个填满整个区域的图像;
   此列中的内容不可滚动。

2. 右栏有文字和图片。 该列的内容很长时可滚动。

因此，当我移动浏览器滚动条时，右侧内容会移动，但左侧列上的图像始终保持不变并填满整个区域。

这可能吗？

这就是我现在所拥有的：

body{
  margin: 0;
  padding: 0;
}

.left, .right {
  float: left;
  width: 50%;
}

.left img {
  height: auto;  
  max-width: 100%;
  outline: 0; 
}

<div class="left">
  <img src="image.jpg" />
</div>
<div class="right">
  <p>Long content</p>
</div>

Answer 1

使用CSS表示左侧div，position:fixed表示右侧div。

小提琴：http://jsfiddle.net/3phfgsxj/4/