身高使DIV离开父母

Question

这是问题

https://i.stack.imgur.com/on8t9.jpg

红线是要出去的Div的边界。

所以，我在身体上和html上有这个：

html {
  height: 100%;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}
body {
  height: 100%;
  background:url('http://sf.co.ua/13/03/wallpaper-2682923.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

这是HTML

<div style="margin-top: 10%; height: 100% !important;" class="container-fluid">
        <div class="bodyc mx-auto">
            <div style="background-color: orange; border-top-right-radius: 15px; border-top-left-radius: 15px;">
                <ul class="nav nav-pills font-weight-bold">
                  <li class="nav-item">
                    <a class="nav-link active active-orange" style="border-top-left-radius: 15px !important;" href="#">HOME</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link text-dark" href="#">STAFF LIST</a>
                  </li>
                </ul>
            </div>
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img style="height: 250px !important;" class="d-block w-100" src="https://i.imgur.com/pxfQAPP.jpg" alt="First slide">
                </div>
                <div class="carousel-item">
                  <img style="height: 250px !important;" class="d-block w-100" src="https://i.imgur.com/IFNufte.jpg" alt="Second slide">
                </div>
                <div class="carousel-item">
                  <img style="height: 250px !important;" class="d-block w-100" src="..." alt="Third slide">
                </div>
              </div>
              <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
            <div style="height: 100% !important;">
                <div class="row" style="height: 100%">
                    <div class="col col-lg-9">
                        <div>
                        </div>
                    </div>
                    <div class="col col-lg-3">
                        <div style="border-left: solid red; height: 100% !important;">
                            test
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

红线应停止在白色div结束的地方， <div style="border-left: solid red; height: 100% !important;">

，但由于某种原因，它一直都在下降，我不明白为什么。

另外，我也不明白为什么白色的div不会一直降低，因为它的身高也100％：

.bodyc {
    position: relative;
    background-color: white;
    width: 90%;
    border-radius: 15px;
    height: 100% !important;
}

我正在使用bootstrap

JSFIDDLE

https://jsfiddle.net/8eddeuu1/2/

Answer 1

要修复红色边框线，我想出了一个快速黑客，添加：

overflow: hidden;

到.bodyc class。

白色Div并没有一直向下下降，因为"高度：100％"没有做您认为的含义。CS中的百分比相对于包含元素。如果我有：

<div id="outer" style="height: 1%;"><div id="inner" style="height: 100%;"></div></div>

内部的div不会比外部div更高。它将很高。