Question

这就是问题

https://i.imgur.com/WRfKm7w.jpg

红线是div出界的边界。

所以，我在body和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不会一直向下，因为＆＃34;身高：100％＆＃34;没有做你认为的意思。 CSS中的百分比是相对于包含元素的。如果我有：

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

内部div不会高于外部div。它会一样高。

高度使div离开父母

的jsfiddle

1 个答案: