CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Someguywhocodes
Someguywhocodes

Reputation: 781

Container div is not expanding to full height

I'm having a problem where my container div is not fully expanding. The inner jumbotron div is overlapping it.

enter image description here

The orange is my jumbotron, while the green is my container. I need the jumbotron to stay inside the container.

Here is the HTML:

<div class="container">
    <div class="page-header">
        <img src="../../images/logoonly.png" class="img-responsive" alt="Cinque Terre"
             class="img-responsive center-block">
    </div>
    <div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand" href="#"></a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
                    <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
                        class="icon-bar"></span><span class="icon-bar"></span>
                </button>
            </div>
            <!-- Navbar here-->
        </div>
    </div>

    <!--Below code loops through the database and displays the result -->
    <?php
    if ($result = $db->query("SELECT * FROM userinformation WHERE username = '" . $_SESSION['username'] . "'")) {`enter code here`
        if ($count = $result->num_rows) {
            while ($row = $result->fetch_object()) {
                ?>
                <div class="jumbotron container-fluid">

                <!--Stuff here -->

                <?php
            }
            $result->free();
        }
    }
    ?>

Upvotes: 1

Views: 688

Answers (2)

Johannes
Johannes

Reputation: 67778

A 100% height setting only affects elements whose positionis absolute or fixed. Since your "container" DIV seems to be the DIV containing everything else, "absolute" might make sense for that, plus overflow: visible for situations where the contents are higher than the screen/window - then it will scroll, and still show its background

Upvotes: 0

thedarklord47
thedarklord47

Reputation: 3312

try adding the following to your container css

overflow: auto;

Upvotes: 3

Related Questions