看起来容易出问题，但如果我在css中插入.l-main，则无法将height:100%显示为height:100%。这个太大了。除非，它太小了。我已经尝试插入html, body {margin:0;padding:0;height:100%;}
实际上，我使用bootstrap和angular。
index.ejs
<div class="l-cotents">
<div class="l-main">
<nav class="l-side child">
<bl-side ng-reflect-title="設定" ng-reflect-items="[object Object],[object Object">
<nav class="l-side bl-side">
<ul class="c-nav">
<li class="c-nav__list">
<span class="c-nav__mejorItem">ワンオフ</span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/custvcle-title" href="./mastar_m/mastar_m.ejs">マスメン</a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/employee" href="/maintenance/employee">ガイド</a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/label" href="/maintenance/label"></a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/companymgt" href="/maintenance/companymgt"></a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/organization" href="/maintenance/organization"></a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/vcleregoffice" href="/maintenance/vcleregoffice"></a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/listitem" href="/maintenance/listitem"></a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/numbering" href="/maintenance/numbering"></a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/general-initial" href="/maintenance/general-initial"></a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/vehicle-makername" href="/maintenance/vehicle-makername"></a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/carinsurance" href="/maintenance/carinsurance"></a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/vehicle-modelname" href="/maintenance/vehicle-modelname"></a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/custvcle-remarks" href="/maintenance/custvcle-remarks"></a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="" href="/maintenance/"></a></span>
</li>
<li class="c-nav__list">
<span><a class="c-nav__link c-nav__link--side" ng-reflect-router-link="/carowner" href="/maintenance/carowner"></a></span>
</li>
</ul>
</nav>
</bl-side>
</nav>
<section class="l-common content">
<div class="l-common__inner">
<div class="l-common__inner__cell l-common__inner__cell--contents main-content">
<router-outlet></router-outlet>
<ng-component ng-version="4.0.1">
<bl-title _nghost-c8="" ng-reflect-title="TOP" ng-reflect-is-complete-button-group-view="false" ng-reflect-is-trash-mode-button-view="true">
<h1 class="c-headding u-shadow--headding bl-title">
<div><span class="bl-title-title">ワンオフ</span></div>
<div class="btn-group btn-toggle pull-right">
<button class="btn-group btn-toggle bl-title-heading-button" ng-reflect-klass="btn-group btn-toggle bl-title-" ng-reflect-ng-class="[object Object]">
<span class="btn c-btn--blue"><span>編集</span></span>
<span class="btn c-btn--gray"><span>ゴミ箱</span></span>
</button>
</div>
</h1>
</bl-title>
<div class="maintenance-body col-lg-11 col-md-11 col-sm-11 col-xs-11"></div>
<span></span>
</ng-component>
</div>
</div>
<div class="u-margin20">
<p class="u-mg15"><a href="#">002_業務メニュー</a></p>
<p class="u-mg15"><a href="#">003_整備メニュー</a></p>
<p class="u-mg15"><a href="#">004_日次メニュー</a></p>
<p class="u-mg15"><a href="#">005_マスタメンテメニュー</a></p>
<p class="u-mg15"><a href="#">013_ヘルプ</a></p>
<p class="u-mg15"><a href="#">014_大分類操作ナビゲーション</a></p>
<p class="u-mg15"><a href="#">015_中分類操作ナビゲーション</a></p>
<p class="u-mg15"><a href="#">016_ナビゲーションリスト</a></p>
<p class="u-mg15"><a href="#">021_顧客車両整備履歴照会</a></p>
</div>
</section>
</div>
</div>
_menu.scss
html, body {margin:0;padding:0;height:100%;}
.l-cotents {
height: 100%!important;
}
.l-side a, .l-sideSub a {
color: #fff;
text-decoration: none; }
.l-side {
display: inline-block;
width: 26.5rem;
min-height:100%;
}
.l-sideSub {
width: 19.4rem;
}
.l-common.content {
display: inline-block;
width: 84%;
min-height: 100%;
}
.parent {
overflow: hidden;
zoom: 1;
}
.child {
float: left;
}
.parent:after {
content: "";
clear: both;
display: block;
}
.l-main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
height: calc(100% - 125px);
}
.l-side, .l-sideSub {
position: relative;
color: #fff;
background-color: #263141;
z-index: 1;
}
答案 0 :(得分：0)
在您的代码中，<div class="l-cotents">是父级，您将高度设为height: 100%!important;，您将此高度定义为固定高度，如height: 200px !important;，这样您就可以添加子级{{1} }}
给html元素100％高度，赋予body元素100％高度
height: 100%!important;