Two column layout with one fixed and one scroll

Question

I have created a two column layout.

<div class="layout">
  <div class="col1"></div>
  <div class="col2"></div>
</div>

https://jsfiddle.net/aLwcm4mq/2/

I have two slight queries:

1. How can I make the right column only scroll when the mouse is hovered over that side?

2. How can I stop the right column moving oddly? I can scroll up creating a white space above the column (when at the top) or scroll left/right creating space either side respectively. (Note: This problem doesn't replicate in JS Fiddle, but is apparent on my MacBook running Safari).

Answer 1

The key is to set all the relevant containers to height:100% and apply overflow:auto to the column you wish to enable scroll. See the simple demo below, the div layout is not needed.

html, body, .col1, .col2 {
  height: 100%;
}

body {
  margin: 0;
}

.col1, .col2 {
  width: 50%;
}

.col1 {
  background-color: pink;
  position: fixed;
  left: 0;
  top: 0;
}

.col2 {
  background-color: silver;
  margin-left: 50%;
  overflow: auto;
}

<div class="col1">1</div>
<div class="col2">
  2
  <div style="height:200vh;">scroll test</div>
</div>