Проблема прокрутки md-контента в AngularJS

Question

Проблема прокрутки md-контента в AngularJS

0

Я разработал веб-страницу с заголовком, содержимым и нижним колонтитулом с использованием адаптивного и углового материала. Тело содержания имеет md-content, внутри него имеется несколько текстовых элементов абзаца <p>. Я установил переполнение в auto (overflow: auto). Но я не могу прокручивать контент.

Следующий исходный код содержит HTML, AngularJS и CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<style>

html, body {height: 100%; margin:0px !important;}

header{
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: #777;
    z-index: 1;
}

.content{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color:#ffffcc;
    position: fixed;
    top:0px;
    bottom:0px;
    width:100%;
}

footer{
    background-color: #777;
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    z-index: 1;
}

.contentdemoBasicUsage div.demo-content {
  height: 600px; }

.contentdemoBasicUsage div[ng-controller] {
  height: 100%;
  padding-bottom: 15px; }

.contentdemoBasicUsage md-content {
  padding: 24px; 
  height: calc(100% - 100px);
  overflow:auto;
  }
</style>
</head>

<body>
<header class="header">my header</header>
    <div class="content">
<div ng-app="MyApp" class="contentdemoBasicUsage" ng-controller="AppCtrl" layout="column" ng-cloak="">
  <md-toolbar class="md-warn">
    <div class="md-toolbar-tools">
      <h2 class="md-flex">Toolbar: md-warn</h2>
    </div>
  </md-toolbar>
	
  <md-content flex="" layout-padding="">
    <p>Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare, cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.</p>

    <p>
Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent.
    </p>

    <p>
Ad sea dolor accusata consequuntur. Sit facete convenire reprehendunt et. Usu cu nonumy dissentiet, mei choro omnes fuisset ad. Te qui docendi accusam efficiantur, doming noster prodesset eam ei. In vel posse movet, ut convenire referrentur eum, ceteros singulis intellegam eu sit.
    </p>

    <p>
Sit saepe quaestio reprimique id, duo no congue nominati, cum id nobis facilisi. No est laoreet dissentias, idque consectetuer eam id. Clita possim assueverit cu his, solum virtute recteque et cum. Vel cu luptatum signiferumque, mel eu brute nostro senserit. Blandit euripidis consequat ex mei, atqui torquatos id cum, meliore luptatum ut usu. Cu zril perpetua gubergren pri. Accusamus rationibus instructior ei pro, eu nullam principes qui, reque justo omnes et quo.
    </p>

    <p>
Sint unum eam id. At sit fastidii theophrastus, mutat senserit repudiare et has. Atqui appareat repudiare ad nam, et ius alii incorrupte. Alii nullam libris his ei, meis aeterno at eum. Ne aeque tincidunt duo. In audire malorum mel, tamquam efficiantur has te.
    </p>

    <p>
Qui utamur tacimates quaestio ad, quod graece omnium ius ut. Pri ut vero debitis interpretaris, qui cu mentitum adipiscing disputationi. Voluptatum mediocritatem quo ut. Fabulas dolorem ei has, quem molestie persequeris et sit.
    </p>

    <p>
Est in vivendum comprehensam conclusionemque, alia cetero iriure no usu, te cibo deterruisset pro. Ludus epicurei quo id, ex cum iudicabit intellegebat. Ex modo deseruisse quo, mel noster menandri sententiae ea, duo et tritani malorum recteque. Nullam suscipit partiendo nec id, indoctum vulputate per ex. Et has enim habemus tibique. Cu latine electram cum, ridens propriae intellegat eu mea.
    </p>

    <p>
Duo at aliquid mnesarchum, nec ne impetus hendrerit. Ius id aeterno debitis atomorum, et sed feugait voluptua, brute tibique no vix. Eos modo esse ex, ei omittam imperdiet pro. Vel assum albucius incorrupte no. Vim viris prompta repudiare ne, vel ut viderer scripserit, dicant appetere argumentum mel ea. Eripuit feugait tincidunt pri ne, cu facilisi molestiae usu.
    </p>

    <p>
Qui utamur tacimates quaestio ad, quod graece omnium ius ut. Pri ut vero debitis interpretaris, qui cu mentitum adipiscing disputationi. Voluptatum mediocritatem quo ut. Fabulas dolorem ei has, quem molestie persequeris et sit.
    </p>

    <p>
Est in vivendum comprehensam conclusionemque, alia cetero iriure no usu, te cibo deterruisset pro. Ludus epicurei quo id, ex cum iudicabit intellegebat. Ex modo deseruisse quo, mel noster menandri sententiae ea, duo et tritani malorum recteque. Nullam suscipit partiendo nec id, indoctum vulputate per ex. Et has enim habemus tibique. Cu latine electram cum, ridens propriae intellegat eu mea.
    </p>

    <p>
Duo at aliquid mnesarchum, nec ne impetus hendrerit. Ius id aeterno debitis atomorum, et sed feugait voluptua, brute tibique no vix. Eos modo esse ex, ei omittam imperdiet pro. Vel assum albucius incorrupte no. Vim viris prompta repudiare ne, vel ut viderer scripserit, dicant appetere argumentum mel ea. Eripuit feugait tincidunt pri ne, cu facilisi molestiae usu.
    </p>
  </md-content>

</div>
</div>
    <footer class="footer">my footer</footer>
<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->
<!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
  <script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope) {

});
</script>
</body>
</html>

B.Balamanigandan 25 март 2016, в 07:29

Источник

0

проверьте ответы на stackoverflow.com/questions/36188444/…
sdfacre 25 март 2016, в 06:28
0

@sdfacre Я попробовал, но это не сработает ... Пожалуйста, проверьте это один раз, пожалуйста ...
B.Balamanigandan 25 март 2016, в 06:31

Теги:

html

angularjs

css

scrollbar

2 ответа

0

Значение свойства для overflow-

visible - переполнение не обрезается. Он отображается вне поля элемента. Это значение по умолчанию
hidden - переполнение обрезается, а остальная часть содержимого будет невидимой
scroll - переполнение обрезается, но добавляется полоса прокрутки, чтобы увидеть остальную часть содержимого
auto - Если переполнение обрезается, необходимо добавить строку прокрутки, чтобы увидеть остальную часть содержимого
initial - Устанавливает это свойство по умолчанию. Читайте об исходных
inherit - Наследует это свойство от его родительского элемента. Читайте о наследовании

Попробуйте использовать значение прокрутки для переполнения.

Manish62 25 март 2016, в 04:52

Ещё вопросы

проверьте ответы на stackoverflow.com/questions/36188444/…
@sdfacre Я попробовал, но это не сработает ... Пожалуйста, проверьте это один раз, пожалуйста ...

sdfacre · Accepted Answer · 2016-03-25T06-25-00.000Z

1

Лучший ответ

добавьте макет-заполнить в свой ng-app div

<div ng-app="MyApp" class="contentdemoBasicUsage" ng-controller="AppCtrl" layout="column" ng-cloak="" layout-fill>
....

см. http://codepen.io/anon/pen/WwONQV

sdfacre 25 март 2016, в 06:25

0

Благодарю. <md-content> <md-content> </ md-content> <md-content> </ md-content> </ md-content> Как сделать float: оставлено для внутреннего md-содержимого. Пожалуйста, помогите мне ...
B.Balamanigandan 25 март 2016, в 08:39
0

добавить layout = 'row' к внешнему md-контенту. проверьте материал.angularjs.org/ latest/layout/introduction для углового расположения материала
sdfacre 25 март 2016, в 09:36
0

Как сделать мобильный отзывчивым? md-контент имеет 2 внутренних md-контента. В Mobile View 2 внутренних md-контента должны располагаться сверху и снизу, а не слева и справа. Пожалуйста, помогите мне ...
B.Balamanigandan 26 март 2016, в 19:03
0

добавить layout-xs = "column" к внешнему md-контенту. поэтому ваш внешний md-контент должен иметь и layout = "row", и layout-xs = "column".
sdfacre 27 март 2016, в 05:46
0

Благодарю. еще одна помощь. Как убрать свойство height для мобильных устройств. Потому что прямо сейчас высота установлена на высоту области просмотра устройства. Если это мобильный. Мне нужно убрать высоту. Пожалуйста, помогите мне ...
B.Balamanigandan 27 март 2016, в 06:55
0

Значит ли это, что вы хотите прокрутить всю страницу, а не md-контент на мобильном телефоне?
sdfacre 27 март 2016, в 06:58
0

да ... а ширина должна быть 100% ...
B.Balamanigandan 27 март 2016, в 06:59
0

В моем посте с вопросом. Я установил Контент между верхним и нижним колонтитулом. Таким образом, высота страницы ограничена высотой области просмотра устройства. Итак, мне нужно ослабить высоту только для мобильных устройств.
B.Balamanigandan 27 март 2016, в 07:08
0

просто google @media и используйте его, чтобы применить настройку высоты к определенной ширине.
sdfacre 27 март 2016, в 08:56

Показать ещё 7 комментариев