CODEWITHSUNDEEP
htmlcssmarginpadding
user2578173
user2578173

Reputation:

Extra margin appears after body

Here is the jsfiddle I can't post parts of the code because it would be too long.

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

The Problem is when you resize the window smaller than 254px it creates a space below the footer and I don't understand how to do it.

Upvotes: 0

Views: 115

Answers (1)

davidpauljunior
davidpauljunior

Reputation: 8338

It seems to be caused because your micro clearfix has content: ".". That full stop has a height because it's a character.

Change the clearfix to:

.clearfix:after {
  content: " ";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}

The reason it doesn't happen on the wider display is because you set min-height: 150px on the footer, and when the list and the languages dropdown are side by side there's enough space left within that 150px for the .. When it's smaller and they stack, the footer is taller than 150px so that . is actually coming after. You can test this by removing the min-height and then you'll have the error on all screen sizes.

Demo

Even better is the micro clearfix:

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

Upvotes: 1

Related Questions