0

It looks easy problem but it's impossible to show .l-main up as height:100% if i insert height:100% in css. its too big. unless, it too tiny. I already tried to insert html, body {margin:0;padding:0;height:100%;}

Actually, I use bootstrap and 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;
}
Ganesh Yadav
  • 2,607
  • 2
  • 29
  • 52
mayu
  • 35
  • 1
  • 6
  • I'm not exactly sure what you are asking but have you tried replacing 100% with 100vh ? – Dylan Anlezark Jul 05 '17 at 01:03
  • Yes, that is the thing I expected. thanks so much!!!! this is code I changed html, body {margin:0;padding:0;height: 100vh ;} .l-cotents { height: 100vh ; } .l-side a, .l-sideSub a { color: #fff; text-decoration: none; } .l-side { display: inline-block; width: 26.5rem; height: 100vh ; } – mayu Jul 05 '17 at 01:18
  • see this [link](https://stackoverflow.com/questions/10871898/why-cant-i-make-my-div-100-height-if-i-use-an-html5-doctype-how-do-i-get-it-1) you cant make height 100% unless you have defined the parent or to itself. – Denny Sutedja Jul 05 '17 at 01:19

1 Answers1

0

In your code <div class="l-cotents"> is the parent and you have made the height as height: 100%!important; you define this height to a fixed height like height: 200px !important; so you can add the child class height: 100%!important;

Give html element 100% height, give body element 100% height

html, body {
      width: 100%;
      height: 100%;
      background: white;
      margin:0;
      padding:0;
    }
jos
  • 1,082
  • 5
  • 19
  • 45