div不会伸展到屏幕底部

问题描述：

我创建了一个网页，如下图所示，但是我无法使页面的一部分一直伸展到底部，就像在黑暗区域中看到的一样在图像中。我已经完成了研究并在这里搜索了类似帖子的索引，但是我没有尝试过似乎可以做到这一点。div不会伸展到屏幕底部

身高：100％;位置：相对;不工作

身高：自动;最小高度：100％;不工作

底部：0;不工作

html{ 
 
    height:100%; 
 
} 
 

 
#home { 
 
    background: url(../img/chemical.jpg) no-repeat center center; /*Full Witdth background image*/ 
 
    padding: 0; 
 
    -webkit-background-size: cover; 
 
    background-size: cover; 
 
    -moz-background-size: cover; 
 
    min-height: 600px; 
 
    width:auto; 
 
    min-width:100%; 
 
} 
 
    /*STYLE FOR OVERLAY CLASS - WHICH IS ABOVE IMAGE WITH OPACITY/TRANSPARENCY 0.75*/ 
 
    #home .overlay { 
 
     padding-bottom:20%; 
 
     background-color: rgba(0, 116, 112,0.6); /*.75 opacity of the color so that background image is visible*/ 
 
     min-height: 600px; 
 
     color: #fff; 
 
     width:auto; 
 
     min-width:100%; 
 
} 
 

 
body { 
 
    margin-top: 100px; 
 
    background-color: #222; 
 
} 
 

 
#wrapper { 
 
    padding-left: 0; 
 
} 
 

 
#page-wrapper { 
 
    width: 100%; 
 
    bottom:0; 
 
    padding: 0; 
 
    background-color: #fff; 
 
}

<body> 
 

 
<div id="wrapper" style="height:auto; min-height:100%"> 
 

 
    <!-- Navigation --> 
 
    <?php include 'navbar.php'; ?> 
 

 
    <div id="page-wrapper"> 
 
     <div id="home"> 
 
     <div class="overlay"> 
 

 
     <div class="container-fluid"> 
 

 
      <!-- Page Heading --> 
 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 
        <h1 class="page-header"> 
 
         View All Overdue Lab Tests 
 
        </h1> 
 
        <ol class="breadcrumb"> 
 
         <li class="active"> 
 
          <i class="fa fa-dashboard"></i> Dashboard 
 
         </li> 
 
        </ol> 
 
       </div> 
 
      </div> 
 
      <!-- /.row --> 
 

 
      <div class="row" style="height:100%"> 
 
       <div class="col-lg-12"> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading"> 
 
          <i class="fa fa-long-arrow-right fa-fw"></i> All Overdue Lab Test: 
 
          <button style="float:right; height:25px; width:200px; color:black; border-radius:25px 25px 25px 25px;" value="hello">Prompt Overdue Items</button> 
 
         </div> 
 
         <div class="panel-body" style="color:black;"> 
 
          "Table Data" 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!-- /.row --> 
 

 
    </div> 
 
    <!-- /.container-fluid --> 
 
    </div> 
 
    </div>  
 
    </div> 
 
    <!-- /#page-wrapper --> 
 

 
</div> 
 

 
</body>

哪个div你想要100％？类或ID名称？ –

你应该在'

'和''上使用100％......然后，所有父元素应该100％在你的子元素将使用100％的地方。我希望这一点很明确。 –

@XahedKamal都是#home和.overlay – fizjin

答

100％的高度元素只会视的100％，如果所有的父母都有100％的高度。

要启动：

html, body { 
    height: 100%; 
}

还有两位家长#wrapper和#page-wrapper。

另一种方法是使用“视口单位”，如vh。

#home { 
    min-height: 100vh; 
}

这将工作，无论父母的高度。这里是caniuse browser support table.

谢谢，这工作！ – fizjin

div不会伸展到屏幕底部

相关推荐