如何固定兩個相同高度的柱子尺寸不同

Question

我有一排包含三列的行，它們的大小分別為10％80％10％，但是當我查看頁面時， player列大於slider列。 我不明白為什么，因為列player和slider的大小相同，但是呈現的卻不同。 當我打開檢查時，我發現單3列高度的值之和超過了文檔正文的高度。

 html { height: 100%; } body { height: 100%; overflow-y:hidden; } body { font-family: 'Muli', sans-serif; } .navbar-brand { height:10%; } .container-fluid { height: 100%; padding-left: 0px; padding-right: 0px; overflow: hidden; } .row { margin-left: 0px; margin-right: 0px; overflow: hidden; } .row-first { height:70%; overflow: hidden; } .row-full-height { height:100%; overflow: hidden; } .full-width { width:100%; overflow: hidden; } .height20p{ height:20%; overflow: hidden; } .row-second { height:30%; overflow: hidden; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">JS</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse w-100 justify-content-center" id="navbarSupportedContent"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <div class="container-fluid"> <div class="row no-gutters" style="height:100%" > <div class="col-sm-2" style="background-color: rgb(105, 128, 0)"> 1 </div> <div class="col-sm-7" style="background-color: rgb(240, 144, 1)"> <!-- contiene player 3d, slider ---> <div class="row no-gutters" style="height:100%" > <div class="col-sm-12" style="background-color: rgb(128, 0, 21); height:10%"> player </div> <div class="col-sm-12" style="background-color: rgb(78, 59, 82); height:80%"> 3d </div> <div class="col-sm-12" style="background-color: rgb(115, 139, 117); height:10%"> slider </div> </div> </div> <div class="col-sm-3" style="background-color: rgb(230, 64, 14)"> 4 </div> </div> </div> 

Answer 1

那是因為您的container-fluid具有height:100% ，從而使其獲得頁面的高度。 要解決此問題，您必須將navbar高度navbar容器流體的高度。

height: calc(100% - 56px);

 html { height: 100%; } body { height: 100%; overflow-y:hidden; } body { font-family: 'Muli', sans-serif; } .navbar-brand { height:10%; } .container-fluid { height: calc(100% - 56px); padding-left: 0px; padding-right: 0px; overflow: hidden; } .row { margin-left: 0px; margin-right: 0px; overflow: hidden; } .row-first { height:70%; overflow: hidden; } .row-full-height { height:100%; overflow: hidden; } .full-width { width:100%; overflow: hidden; } .height20p{ height:20%; overflow: hidden; } .row-second { height:30%; overflow: hidden; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">JS</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse w-100 justify-content-center" id="navbarSupportedContent"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <div class="container-fluid"> <div class="row no-gutters" style="height:100%" > <div class="col-sm-2" style="background-color: rgb(105, 128, 0)"> 1 </div> <div class="col-sm-7" style="background-color: rgb(240, 144, 1)"> <!-- contiene player 3d, slider ---> <div class="row no-gutters" style="height:100%" > <div class="col-sm-12" style="background-color: rgb(128, 0, 21); height:10%"> player </div> <div class="col-sm-12" style="background-color: rgb(78, 59, 82); height:80%"> 3d </div> <div class="col-sm-12" style="background-color: rgb(115, 139, 117); height:10%"> slider </div> </div> </div> <div class="col-sm-3" style="background-color: rgb(230, 64, 14)"> 4 </div> </div> </div>