CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3542456
user3542456

Reputation:

Creating a sticky footer

http://codepen.io/RobbyT15/pen/otyfw/

I'm working on a site design, and I'm trying to make a dynamic footer that stays at the bottom of the window regardless of the screen size. Using the fixed attribute in CSS doesn't work as it doesn't scroll with the page. I've done something similar with a floating div, however, when I tried to incorporate it with the footer, it doesn't work. I've looked around at the other similar questions, but each of them say to add the position: fixed CSS rule. Any suggestions?

Edit* I made the changes everyone suggested, however, The footer it not "attaching itself to the bottom of the window. I'm sorry I'm being such a pain with this.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Robert Thompson</title>
        <link rel="stylesheet" href="styles/desktop.css">
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="includes/init.js"></script>
        <script type="text/javascript" src="includes/main.js"></script>
    </head>
    <body>
        <div id="main">
            <header></header>
            <div id="content">
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
            </div>
            <footer></footer>
        </div>
    </body>
</html>

CSS

body{
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #757575;
    color: #FFFFFF;
    z-index: 0;
}

header, footer{
    position: relative;
    display: block;
    width: 100%;
    height: 50px;
    background-color: #000000;
    z-index: 2;
}

header{
    border-bottom: 3px inset #DDAA00;
}

footer{
    border-top: 3px outset #DDAA00;
}

#main{
    position: absolute;
    background-color: red;
    z-index: 1;
}

#content{
    position: relative;
    left: 250px;
    width: 70%;
    z-index: 1;
}

Upvotes: 0

Views: 114

Answers (2)

sheriffderek
sheriffderek

Reputation: 9043

Take a look at this: http://codepen.io/sheriffderek/pen/ziGbE

It's a combination of the few sticky footer options out there - and some optional javascript to adjust dynamically depending on the footer's actual content (which might be different at different screen sizes)

Upvotes: 0

WASasquatch
WASasquatch

Reputation: 1044

You would need to use position relative, and absolute. So to your container (the body of the page) add position: relative and then to your footer you would add position: absolute no need for margining. Also look into CSS Sticky Footer as TylerH pointed you too.

Upvotes: 1

Related Questions