CODEWITHSUNDEEP
css
fizjin
fizjin

Reputation: 141

div won't stretch to bottom of screen

Ive created a webpage as you can see below, however i can't make the a section of the page to stretch all the way to the bottom as you can see by the dark area in the image. I've done research and searched through som of the similar posts in here but nothing i've tried seem to do the trick.

Height:100%; position:relative; Doesnt work

Height:auto; min-height:100%; Doesnt work

Bottom:0; Doesnt work

enter image description here

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>

Upvotes: 1

Views: 2204

Answers (1)

Alejalapeno
Alejalapeno

Reputation: 1008

100% height elements will only be 100% of the viewport if all parents have 100% height.

To start:

html, body {
    height: 100%;
}

As well as the two parents #wrapper and #page-wrapper.

The alternative is to use 'Viewport Units' like vh.

#home {
    min-height: 100vh;
}

That will work regardless of parents heights. Here is the caniuse browser support table.

Upvotes: 5

Related Questions