Change height of footer css

css, html

Solution

If you match the negative bottom margin on `.wrapper` to the height of your footer, the entire footer should show.

Or, if you're going for a footer that floats at the bottom of the page, you can do this:

.wrapper {
    min-height: 100%;
    position: relative;
}

.content {
    /* padding the footer adds 40 to footer height */
    padding-bottom: 140px;
}

#footer {
    position: absolute;
    bottom: 0;
    background: #444444;
    height: 100px;
    font-family: 'Open Sans', sans-serif;
    color: #FFFFFF;
    padding: 20px;
}

<div class="wrapper">
    <div class="content">
        <p>Your website content here.</p>
    </div>
    <div id="footer">
        <p>&copy; 2013 Friend | Design and Development. All Rights Reserved.</p>
    </div>
</div>

matching height to `.content` padding

Problem

Problem: I don't know how to change the height of the footer when using `reset.css`, the height property for the footer div doesn't change anything. You can clone this locally and check it out here HTML ``` <div class="wrapper"> <p>Your website content here.</p> </div> <div id="footer"> <p>&copy; 2013 Friend | Design and Development. All Rights Reserved.</p> </div> ``` CSS - style.css ``` html, body { height: 100%; font-family: 'Arial', Helvetica; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } #footer { background: #444444; height: 100px; font-family: 'Open Sans', sans-serif; color: #FFFFFF; padding: 20px; } ``` RESET.css ``` /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } ```

Original source