CODEWITHSUNDEEP
htmlcss
eveo
eveo

Reputation: 2833

Change height of footer css

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;
}

Upvotes: 5

Views: 74740

Answers (3)

Dom Day
Dom Day

Reputation: 2562

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

Upvotes: 2

user7675
user7675

Reputation:

In Chrome 27, the bottom margin on .wrapper is limiting the visible height of #footer. The footer does get taller when the height property is increased, but the extra height (outside the 4em worth of .wrapper) is hidden beyond the initial viewport height.

So, it's performing exactly as specified: .wrapper takes up all but the bottom 4em of the viewport, and the #footer has its own height unrelated to that 4em.

Upvotes: 0

Nick Zhu
Nick Zhu

Reputation: 89

You're missing the d when you're defining the footer

http://plnkr.co/edit/ULC8NHYMqmP240OW2z1d?p=preview

Upvotes: 0

Related Questions