scroll table content and fix the rest of the page

Question

I'm using angular + angular material, but I think this question is more general. I have a sidenav to the left and in all the right I display a table with many rows, the problem is that if I try to scroll the table actually the whole page is scrolling, moving the sidenav as well. What I want is to scroll only the table and the rest to be fixed. I spent a lot of time but can't arrive to a solution. thanks

This is the code, if you are not familiar with angular material, md-content as far as I know should be the same as a div element. layout="row" means that the children of this element should be positioned as a row.

<link rel="stylesheet" href="main/main.css">
<md-content layout="row">
<md-content>
    <md-sidenav style="height: 100%" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="true">
            <md-toolbar style="min-height: 1px; height: 50px" class="md-theme-indigo">
                <h3 class="md-toolbar-tools">Your Library</h3>
            </md-toolbar>
            <md-content layout="column" layout-padding flex>
                <md-list>
                    <md-list-item class="md-1-line">
                       <md-button class="md-primary md-hue-1" ng-click="showSongs()">Songs</md-button>
                    </md-list-item>
                    <md-list-item class="md-1-line">
                       <md-button class="md-primary md-hue-1" ng-click="getArtists()">Artists</md-button>
                   </md-list-item>
                    <md-list-item class="md-1-line">
                       <md-button class="md-primary md-hue-1" ng-click="getAlbums()">Albums</md-button>
                   </md-list-item>
                    <md-list-item class="md-1-line">
                       <md-button class="md-primary md-hue-1">Playlists</md-button>
                    </md-list-item>
                   <md-divider ></md-divider>
                    <md-list-item class="md-1-line">
                       <md-button class="md-primary md-hue-1">Upload</md-button>
                    </md-list-item>
                    <md-list-item class="md-1-line">
                       <md-button class="md-primary md-hue-1">Download</md-button>
                    </md-list-item>
                </md-list>
            </md-content>
    </md-sidenav>
</md-content>
<md-content layout="column" layout-padding flex>
    <md-content ng-show="showSongsList">
        <div ng-include="'main/songsList.html'"></div>
    </md-content>
    <md-content ng-show="showArtists">
        <div ng-include="artistsTemplate.url"></div>
    </md-content>
    <md-content ng-show="showAlbums">
        <div ng-include="albumsTemplate.url"></div>
    </md-content>
</md-content>
</md-content>
<md-content ng-include="'navBar.html'"></md-content>
<md-content ng-include="'navBarBottom.html'"></md-content>

Basically the behaviour I'm looking for is something like this: http://codepen.io/zavoloklom/pen/dIgco selecting "Stacked on the left" in sidebar position dropdown, but this example is not for the library I'm using.

Possible duplicate of http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody — Tushar Gupta, Aug 09 '15 at 17:23
not sure, maybe my question was too specific, I gave an exampe of the table, but I have another example where I have the sidenav in the left and to the right I display a list of images, what I'd like is to have the sidenav fixed and scroll only the right side of the page. Tried to have two div elements in a row position, but still scrolling the whole page — nelson687, Aug 09 '15 at 17:28
I could make it work, it was always in front of my eyes since the angular-material website is built using angular-material and it has a fixed sidenav (https://material.angularjs.org/latest/#/) after looking with firebug could realise that the element that wraps the sidenav and the other elements, in my case "" must have a height of 100%. — nelson687, Aug 09 '15 at 19:15

score 0 · Answer 1 · answered Aug 09 '15 at 17:41

Well this might be the solution to your problem

the red div, consider it as your nav; which would be fixed
the green one could be the images div

.left {
  float: left;
  width: 100px;
  height: 100vh;
  background-color: red;
  word-wrap: break-word;
  position:fixed;
}
.right {
  width: 300px;
  float: right;
  height: 300vh;
  word-wrap: break-word;
  background-color: green;
}

<div class="left">laksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnl</div>

  <div class="right">,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas,sdfnlaksndklas</div>

I thought it was a good idea, but when I add position: fixed to the that contains the sidenav , it dissapears :( — nelson687, Aug 09 '15 at 17:48

scroll table content and fix the rest of the page

1 Answers1