Question: In my HTML, this works

```
<div id="portfolio1" onclick="changeMainFrame('lib/portfolio1.html')">

```

to trigger the following function: 

```
function changeMainFrame(srcURL){
  var target = document.getElementById("mainFrame");
  target.src = srcURL;
}

```

I want to migrate it to my javascript doc. But this does not work:

```
document.getElementById("portfolio1").onclick = changeMainFrame("lib/portfolio1.html");

```

I can not find out how to fix this. Any hints? Cannot find a similar situation anywhere for something so simple yet time consuming.

Answer: 
Everything is easier!

```
<Sidebar.Pusher style={{overflow: 'scroll', height: '100%'}}>

```

I think you yourself will understand why this works.
You would need to manually do it with some CSS/SCSS. Basically, you need to set the height to a fixed value. 

```
@media only screen and (max-width: 768px) {
  .ui.wide.left.sidebar, .ui.wide.right.sidebar {
    height: 100vh !important;
    position: absolute;
  }

  .pusher {
    margin-left: 20px;
  }
}

.pushable {
  min-height: 100vh;
}

.ui.wide.left.sidebar, .ui.wide.right.sidebar {
  height: 100vh;
  position: fixed !important;
  bottom: 0px !important;
  top: 0px !important;
}

```