我目前在Web开发项目中使用角形材料。我还使用UI路由器在不同状态之间切换。
我检查过，如果内容对于UI路由器视图而言太大，即使存在垂直滚动条，内容也会被裁剪。
请协助确定如何垂直滚动标签中的所有内容。
请在下面找到两个html文件和适当的样式（为了更好的理解，我将它们添加到了标记中。
请找到与正文有关的索引html文件：
<body layout="row" flex style="height:100%;width: 100%;max-height: 100%;max-width: 100%;overflow:inherit">
<div ui-view class="ng-scope"></div>
</body>
请在下面找到包含侧边栏和的文件：
<div ng-controller="ToolbarController as tc" style="height:100%">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button hide-gt-sm class="md-icon-button" aria-label="Icon">
<md-icon md-svg-src='webui/icons/menu.svg' ng-click="tc.toggleList()" ></md-icon>
</md-button>
<h2>V-Tchilling</h2>
</div>
</md-toolbar>
<div layout-fill layout="row" flex>
<md-sidenav md-is-locked-open="$mdMedia('gt-sm')" md-component-id='snav' class="md-whiteframe-4dp" style="height: 100%" >
<md-content role="navigation">
<img class="png-icon" style="max-width: 80%; width: 50%;align-self: center;padding-top: 5px;padding-bottom: 10px;" src="webui/icons/logo.png">
<ul class="side-menu">
<li ng-repeat="section in tc.menuService.sections" class="parent-list-item"
ng-class="{'parentActive' : tc.isSectionSelected(section)}">
<h2 class="menu-heading" ng-if="section.type === 'heading'"
id="heading_{{ section.name | nospace }}">
{{section}}
</h2>
<menu-link section="section" ng-if="section.type === 'link'"></menu-link>
<menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle>
</li>
<md-divider></md-divider>
</ul>
</md-content>
</md-sidenav>
<md-content layout-fill flex md-scroll-y class="_md layout-column flex">
<ui-view style="align-content: center;" layout-padding flex="noshrink" class="_md layout_padding ng-scope flex-noshrink" name="content"></ui-view>
</md-content>
</div>
</div>
请在下面找到具有md卡的代码片段：
<div style='margin-left: 30px;margin-top: 10px' class="doc-content">
<h1 style='margin-top: 5px;margin-bottom:0px' class='md-display-2'>Register User</h1>
<div style='margin-top: 30px;'>
<md-card style='width: 75%;height: 10%; max-height: 90%;' flex>
<md-toolbar class="md-hue-2" style="margin-bottom: 10px;" >
<h3 class='md-title' style='margin-left: 10px'> User Registration form </h3>
</md-toolbar>
<div style='margin-left: 20px'>
<p class="md-body-2" ng-show='rc.error' style='color:red;padding-top: 2px;padding-bottom: 2px;'> {{rc.error}} </p>
<form name="registerForm">
<md-input-container class="md-block md-input-has-placeholder vt-input-container">
<label>Email</label>
<input type="email" ng-model="rc.user.email" name="email" required>
<div ng-messages="registerForm.email.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">You must supply an email address</div>
<div ng-message="email" class="my-message">Please correct your e-mail address eg: [email protected]</div>
</div>
</md-input-container>
<md-input-container class="md-block md-input-has-placeholder vt-input-container">
<label>First Name</label>
<input type="password" ng-model="rc.user.firstName" name="firstName" required>
<div ng-messages="registerForm.firstName.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">You must supply your first name</div>
</div>
</md-input-container>
<md-input-container class="md-block md-input-has-placeholder vt-input-container">
<label>First Name</label>
<input type="password" ng-model="rc.user.surname" name="surName" required>
<div ng-messages="registerForm.surName.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">You must supply your surname</div>
</div>
</md-input-container>
<md-input-container class="md-block md-input-has-placeholder vt-input-container" required>
<label>Password</label>
<input type="password" ng-model="rc.user.password" name="password">
<div ng-messages="registerForm.password.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">You must supply a password</div>
</div>
</md-input-container>
<md-input-container class="md-block md-input-has-placeholder vt-input-container" >
<label>Confirm Password</label>
<input type="password" name="confirmPassword" ng-model="rc.user.confirmPassword" compare-to="rc.user.password" required>
<div ng-messages="registerForm.confirmPassword.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">Please confirm a confirmation password</div>
<div ng-message="compareTo" class="my-message">The passwords do not match</div>
</div>
</md-input-container>
<md-input-container class="md-block md-input-has-placeholder vt-input-container">
<label>Phone number</label>
<input type="text" ng-model="rc.user.phoneNumber" ng-pattern="/^2588[0-9]{8}/" md-maxlength="12" name="phoneNumber" required>
<div ng-messages="registerForm.phoneNumber.$error" role="alert" multiple="">
<div ng-message="required" class="my-message">Please provide a phone number </div>
<div ng-message="md-maxlength" class="my-message">The number supplied is too long</div>
<div ng-message="pattern" class="my-message">Please supply a number in the format 258+(phoneNumber)</div>
</div>
</md-input-container>
<div layout="row" layout-align="center center" style="padding-top:10px;padding-bottom: 10px;">
<md-button type="submit" ng-disabled="!registerForm.$valid && !isSubmitted" class="md-hue-2 md-raised md-primary" ng-click="rc.registerUser()">Login</md-button>
<div flex="flex"></div>
</div>
</form>
</div>
</md-card>
</div>
</div>
最佳答案
您可以使用md-content。
<md-content flex layout="column|row" ui-view></md-content>
关于javascript - Angular Material UI路由器显示问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38446469/