Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Seth Barthen
Seth Barthen
11,266 Points
Posted by Seth Barthen
Seth Barthen
11,266 Points

White space underneath my footer, but only on some pages

Hello. As the title explains I'm getting some white space underneath my footer but only on some pages. It makes no sense because the coding is typically the same on each page, and I don't have any funky CSS for moving it to the bottom of the page or positioning it.

I could post all my code to show all of you what I'm working with here but I'll just write out the basic format...

<?php my header?>

my content is here

<?php my footer?>

I know that's pretty vague, but that's really all it is. I'm using bootstrap as well to help with my grid layout.

5 Answers

James Gill
PLUS
James Gill
Courses Plus Student 34,936 Points
James Gill
James Gill
Courses Plus Student 34,936 Points

Seth,

Something is different between your pages. Without seeing the actual page code, I'm not sure how someone can help you. Can you post an example of a "good" and "bad" page?

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Haha I figured that'd be the case... Ok here goes.

Good Page:

<?php
$pageTitle = "Systems: Services";
$section = "home";
include("inc/header.php");
include("inc/navbar.php");
?>

<!-- START THE FEATURETTES -->
<div class="container">
    <h1 class="text-center">How we're different...</h1>
    <hr class="featurette-divider">


    <div class="featurette">
        <img class="featurette-image img-circle pull-right" src="../img/responsiveDesign.png">
        <h2 class="featurette-heading">Blah Blah <span class="text-muted">Blah Blah</span></h2>
        <p class="lead">Blah BlahBlah BlahBlah BlahBlah BlahBlah BlahBlah BlahBlah BlahBlah Blah.</p>
        <p>Blah BlahBlah BlahBlah BlahBlah BlahBlah BlahBlah BlahBlah Blah.</p>
    </div>

    <hr class="featurette-divider">

    <div class="featurette">
        <img class="featurette-image img-circle pull-left" src="../img/caring.png">
        <h2 class="featurette-heading">Blah Blah<span class="text-muted">Blah Blah!</span></h2>
        <p class="lead">Blah BlahBlah BlahBlah BlahBlah BlahBlah BlahBlah BlahBlah Blah.</p>
        <p>Blah BlahBlah BlahBlah BlahBlah BlahBlah BlahBlah BlahBlah BlahBlah Blah</p>
    </div>

    <hr class="featurette-divider">

    <div class="featurette">
        <img class="featurette-image img-circle pull-right" src="../img/cms.png">
        <h2 class="featurette-heading">Blah Blah<span class="text-muted">Blah Blah</span></h2>
        <p class="lead">Blah BlahBlah BlahBlah BlahBlah BlahBlah Blah.</p>
    </div>

    <hr class="featurette-divider">
</div>
<!-- /END THE FEATURETTES -->

<?php
include("inc/footer.php");
?>

BAD PAGE:

<?php
$pageTitle = " Systems: Contact";
$section = "contact";
include("inc/header.php");
include("inc/navbar.php");
?>

    <div class="container">
        <div class="row">
            <div class="col-md-12">   
                <h1 class="text-center">Contact Us</h1>

                <?php if (isset($_GET["status"]) and $_GET["status"] == "thanks")  {  ?>
                    <div class="alert alert-success text-center">
                        <strong><span class="glyphicon glyphicon-send"></span> Success! Message sent. We will get back to you as soon as humanly possible.</strong>
                        <button type="submit" class="btn btn-default"><a href="/index.php">Click here to go to the home page!</a></button>
                    </div>    
                <?php } else {  ?>

                <?php
                    if (!isset($error_message)) {
                        echo '<h3 class="text-center">I&rsquo;d love to hear from you! Complete the form to send me an email.</h3>';
                    } else {
                        echo '<p>' . $error_message . '</p>';
                    }
                ?>
                  <hr>
            </div>



            <form role="form" action="contact.php" method="post" >
                <div class="col-md-6 col-md-offset-3">

                        <div class="form-group">
                            <label for="InputName">Your Name:</label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="InputName" id="InputName" value="<?php if (isset($name)) { echo htmlspecialchars ($name); } ?>" placeholder="Enter Name" required>
                                <span class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="InputEmail">Your Email:</label>
                            <div class="input-group">
                                <input type="email" class="form-control" id="InputEmail" name="InputEmail" value="<?php if (isset($email)) { echo htmlspecialchars ($email); } ?>" placeholder="Enter Email" required  >
                                <span class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="InputMessage">Message:</label>
                            <div class="input-group">
                                <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required><?php if (isset($message)) { echo htmlspecialchars ($message); } ?></textarea>
                                <span class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></span>
                            </div>
                        </div>

                        <div class="form-group" style="display: none;">
                            <label for="InputAddress">Address</label>
                            <div class="input-group" >
                                <input type="text"  id="InputAddress" name="InputAddress"  placeholder="Humans: Please leave this field blank if showing. Thanks.">
                                <p></p>
                            </div>
                        </div>


                    <div class="well well-sm text-right"><strong><i class="glyphicon glyphicon-asterisk"></i> Required Fields</strong></div>
                        <button type="submit" class="btn btn-default center-block">Send!</button>
                </div>
            </form>

                <?php }  ?>

        </div>
    </div>

<?php include("inc/footer.php");  ?>

FOOTER PAGE: 

<br>
<br>

<footer >
    <div class="container footer text-center">
        <div class="col-xs-4">
            <h3 class="customFont">Systems &copy;<?php echo date('Y'); ?></h3>
        </div>
        <div class="col-xs-4">
            <h3 class="glyphicon glyphicon-arrow-up"><a href="#topPage" class="customLink">TOP</a></h3>
        </div>
        <div class="col-xs-4">
            <div id="social-icons">
                <a href="#"><img src="../icons/rss.png" width="36" height="36" alt="RSS" /></a>
                <a href="#"><img src="../icons/facebook.png" width="36" height="36" alt="Facebook" /></a>
                <a href="#"><img src="../icons/twitter.png" width="36" height="36" alt="Twitter" /></a>                
                <a href="#"><img src="../icons/stumbleupon.png" width="36" height="36" alt="Stumble Upon" /></a>                
            </div>
        </div>
    </div>
</footer>



        <script src="../js/vendor/bootstrap.js"></script>

    </section>
</body>
</html>

Let me know if there is anything else I'd need to add. The CSS really doesn't do much to these pages so I didn't include it..

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Cool... and the formatting is all messed up to just to add another challenge ;)

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Cool... and the formatting is all messed up to just to add another challenge ;)

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

I think I figured something out.... Seems like the footer will go to the bottom when there is a side scroll bar present. If the page fits all on my screen where there is no side scroll bar it seems to want to have that gap of white space underneath the footer.

Ryan Duchene
PLUS
Ryan Duchene
Courses Plus Student 46,022 Points
Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

I'm pretty sure that your issue is that your page isn't tall enough to completely fill in the height of your web browser. In other words, your browser window is taller than your webpage.

There are two main ways to solve this. First, you can give your main content area (not the html or body element) a min-height of 100vh. This forces the page to be at least tall enough to make the footer stay on the bottom. For obvious reasons, this may not be desired.

You can also implement a sticky footer. A sticky footer will stick to the bottom of the page, regardless of its height. Guil shows how to make a sticky footer in this video at 2:50. This is probably what you want.