прокрутить содержимое таблицы и исправить остальную часть страницы

Я использую angular + angular материал, но я думаю, что этот вопрос более общий. У меня есть боковая сторона слева, а во всех правах я отображаю таблицу с множеством строк, проблема в том, что если я пытаюсь прокрутить таблицу, на самом деле прокручивается вся страница, перемещая боковую часть. Я хочу прокрутить только таблицу, а остальные исправить. Я потратил много времени, но не могу прийти к решению. спасибо

Это код, если вы не знакомы с угловым материалом, насколько я знаю, 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, выбрав «Сложенные слева» в раскрывающемся списке позиций боковой панели, но этот пример не для библиотеки, которую я использую.


html css angularjs angular-material
person nelson687    schedule 09.08.2015    source источник
comment
Возможный дубликат stackoverflow.com/questions/17067294/   -  person Tushar    schedule 09.08.2015
comment
не уверен, может быть, мой вопрос был слишком конкретным, я привел пример таблицы, но у меня есть другой пример, где у меня есть боковая сторона слева, а справа я отображаю список изображений, что я хотел бы иметь sidenav исправлен и прокручивает только правую часть страницы. Пытался иметь два элемента div в позиции строки, но все равно прокручивал всю страницу   -  person nelson687    schedule 09.08.2015
comment
Можете ли вы добавить сюда свой фрагмент кода или jsFiddle/Plunkr?   -  person Praveen Singh    schedule 09.08.2015
comment
я отредактировал свой вопрос   -  person nelson687    schedule 09.08.2015
comment
Я мог заставить это работать, это всегда было перед моими глазами, так как веб-сайт angular-material построен с использованием angular-material и имеет фиксированную боковую часть (material.angularjs.org/latest/#) после просмотра с помощью firebug можно понять, что элемент, который обертывает sidenav и другие элементы, в моем случае ‹md-content layout =строка› должна иметь высоту 100%.   -  person nelson687    schedule 09.08.2015

Ответы (1)


arrow_upward
0
arrow_downward

Ну, это может быть решением вашей проблемы

  • красный 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>

person Tushar    schedule 09.08.2015
comment
Я подумал, что это хорошая идея, но когда я добавляю position: fixed к ‹md-content›, содержащему sidenav, он исчезает :( - person nelson687; 09.08.2015