Question

我已经创建了一个网页，如下所示，但是我不能让页面的一部分一直延伸到底部，因为你可以通过图像中的暗区看到。我已经完成了研究并在这里搜索了类似帖子的som，但我尝试过的任何东西似乎都没有做到这一点。

高度：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>

Answer 1

如果所有父母的身高都是100％，则100％身高的元素只会是视口的100％。

开始：

html, body {
    height: 100%;
}

以及两位父母#wrapper和#page-wrapper。

另一种方法是使用视口单元＆＃39;比如vh。

#home {
    min-height: 100vh;
}

无论父母的身高如何，这都会奏效。这是caniuse browser support table.

div不会延伸到屏幕的底部

1 个答案: