div 不会延伸到屏幕底部

Question

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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ale*_*eno 5

如果所有父元素的高度均为 100%，则 100% 高度元素将仅占视口的 100%。

开始：

html, body {
    height: 100%;
}

Run Code Online (Sandbox Code Playgroud)

以及两位家长#wrapper和#page-wrapper。

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

#home {
    min-height: 100vh;
}

Run Code Online (Sandbox Code Playgroud)

无论父母身高如何，这都将起作用。这是caniuse 浏览器支持表。

归档时间：	10 年，1 月前
查看次数：	1817 次
最近记录：	10 年，1 月前