html - 滚动表格内容并修复页面的其余部分

Question

我用的是angular + angular material，但我觉得这个问题比较笼统。我在左边有一个 sidenav，在右边我显示了一个有很多行的表格，问题是如果我尝试滚动表格，实际上整个页面都在滚动，同时也移动了 sidenav。我想要的是只滚动表格，其余的要固定。我花了很多时间，但无法找到解决方案。 谢谢

这是代码，如果您不熟悉 Angular Material ，据我所知，md-content 应该与 div 元素相同。 layout="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>

基本上我正在寻找的行为是这样的:http://codepen.io/zavoloklom/pen/dIgco在侧边栏位置下拉列表中选择“堆叠在左侧”，但此示例不适用于我正在使用的库。

Answer 1

这可能是您问题的解决方案

• 红色的div，把它当作你的导航；这将是固定的
• 绿色的可以是图片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>