stricky-footer

by Xiaoke Mao

HTML

<header>
  <h1>
  Site Name
  </h1>
</header>
<main>
  <p>
    Spicy jalapeno bacon ipsum dolor amet hamburger t-bone brisket, tongue bresaola ball tip fatback bacon biltong. Kevin jerky filet mignon chicken andouille. Burgdoggen ball tip turducken doner. Kevin bresaola chicken pork belly, meatloaf bacon boudin sirloin
    leberkas corned beef tenderloin tail landjaeger. Hamburger kielbasa picanha, meatball beef ribs landjaeger prosciutto corned beef pork loin pork chop sirloin chuck fatback tenderloin pancetta. Pancetta bacon shoulder, picanha tenderloin burgdoggen
    filet mignon chicken.</p>
  <p>
    Ground round hamburger drumstick frankfurter, short loin pig turducken capicola salami tenderloin pork. Ham hock prosciutto strip steak, corned beef jerky pork turkey alcatra shankle shank cupim burgdoggen brisket sirloin. Alcatra ground round t-bone,
    bresaola kevin prosciutto shoulder ball tip. Shankle tri-tip rump, boudin beef frankfurter spare ribs drumstick jowl bresaola meatball pork.</p>
  <p>

    Fatback doner frankfurter turducken. Meatball ball tip turducken meatloaf cow. Beef pork loin hamburger meatball salami boudin. Pig bresaola short ribs cow beef, pancetta kevin.</p>
  <p>
    Landjaeger leberkas rump sirloin drumstick venison, brisket meatloaf. Strip steak t-bone leberkas ribeye porchetta. Alcatra ham hock boudin short loin shank pastrami shankle jowl landjaeger. Strip steak drumstick kielbasa pancetta beef ribs biltong. Burgdoggen
    pork belly beef, tenderloin fatback pork loin short ribs doner.</p>
  <p>
    Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!
  </p>
</main>

<footer>
  <p>
    © 2017 No rigths reserved.
  </p>
  <p>
    Made with Love by maoxiaoke
  </p>
</footer>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}


/* Toggle checkbox to alternate between short/long content */

#contents:checked ~ p {
  display: none
}


/* Basic styling */

body {
  margin: 0;
  font: 100%/1.5 Baskerville, Palatino Linotype, Palatino, serif;
}

h1 {
  margin: .5em 0 0;
}

header {
  text-align: center;
  height: 3em;
}

main,
footer {
  display: block;
  padding: .5em calc(50% - 400px);
}

footer {
  background: linear-gradient(#222, #444);
  color: white;
}