css, footer, не отображается до конца страницы

Question

<footer> не хочет растягиваться до конца страницы, вместо этого под блоком образуется пустое место, что делать?

html,
body {
  background-color: #505152;
}

.site-footer {
  background-color: rgba(216, 216, 216, .5);
  text-align: center;
}

#social-wrapper {
  text-align: center;
  position: a
}


/*Social Media Icons*/

.social-wrapper ul li {
  display: inline;
}

.twitter-icon,
.facebook-icon,
.instagram-icon,
.linkedin-icon,
.googleplus-icon,
.youtube-icon,
.foursquare-icon {
  margin-top: 20px;
  width: 40px;
  height: 40px;
  opacity: .6;
  filter: alpha(opacity=60);
  /* For IE8 and earlier */
  border-radius: 25px;
}

.twitter-icon:hover,
.facebook-icon:hover,
.instagram-icon:hover,
.linkedin-icon:hover,
.googleplus-icon:hover,
.youtube-icon:hover,
.foursquare-icon:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
  /* For IE8 and earlier */
}

.footer-end p {
  text-align: center;
}

<body>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <!--FOOTER-->
  <footer class="site-footer">
    <div class="social-wrapper">
      <ul>
        <li>
          <a href="#" target="_blank">
            <img src="image/instagram.png" alt="Twitter Logo" class="twitter-icon"></a>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="https://www.mchenryvillage.com/images/instagram-icon.png" alt="Instagram Logo" class="instagram-icon"></a>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="https://www.columbia.edu/~ml3720/linkedin.jpg" alt="Linkedin Logo" class="linkedin-icon"></a>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="http://www.iconarchive.com/download/i54037/danleech/simple/facebook.ico" alt="Facebook Logo" class="facebook-icon"></a>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="http://icons.iconarchive.com/icons/marcus-roberto/google-play/256/Google-plus-icon.png" alt="Googleplus Logo" class="googleplus-icon"></a>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="https://lh3.googleusercontent.com/j_RwVcM9d47aBDW5DS1VkdxUYCkDUCB6wZglv4x-9SmsxO0VaFs7Csh-FmKRCWz9r_Ef=w170" alt="Youtube Logo" class="youtube-icon"></a>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="http://www.iconarchive.com/download/i94258/designbolts/vector-foursquare/Foursquare-2.ico" alt="Foursquare Logo" class="foursquare-icon"></a>
        </li>
      </ul>
    </div>

    <div class="footer-end">
      <p>Copyright &copy; 2013-Cisco Rendon. All rights reserved.</p>
    </div>
  </footer>

Answer 1

Это так выступает margin у самого последнего абзаца в footer. Можете впринципе все отступы обнулить, чтобы потом не искать, где и что вывалилось.

* {
  margin: 0px;
}

html,
body {
  background-color: #505152;
}

.site-footer {
  background-color: rgba(216, 216, 216, .5);
  text-align: center;
  padding-bottom: 1px;
}

#social-wrapper {
  text-align: center;
  position: a
}


/*Social Media Icons*/

.social-wrapper ul li {
  display: inline;
}

.twitter-icon,
.facebook-icon,
.instagram-icon,
.linkedin-icon,
.googleplus-icon,
.youtube-icon,
.foursquare-icon {
  margin-top: 20px;
  width: 40px;
  height: 40px;
  opacity: .6;
  filter: alpha(opacity=60);
  /* For IE8 and earlier */
  border-radius: 25px;
}

.twitter-icon:hover,
.facebook-icon:hover,
.instagram-icon:hover,
.linkedin-icon:hover,
.googleplus-icon:hover,
.youtube-icon:hover,
.foursquare-icon:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
  /* For IE8 and earlier */
}

<body>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <!--FOOTER-->
  <footer class="site-footer">
    <div class="social-wrapper">
      <ul>
        <li>
          <a href="#" target="_blank">
            <img src="image/instagram.png" alt="Twitter Logo" class="twitter-icon"></a>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="https://www.mchenryvillage.com/images/instagram-icon.png" alt="Instagram Logo" class="instagram-icon"></a>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="https://www.columbia.edu/~ml3720/linkedin.jpg" alt="Linkedin Logo" class="linkedin-icon"></a>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="http://www.iconarchive.com/download/i54037/danleech/simple/facebook.ico" alt="Facebook Logo" class="facebook-icon"></a>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="http://icons.iconarchive.com/icons/marcus-roberto/google-play/256/Google-plus-icon.png" alt="Googleplus Logo" class="googleplus-icon"></a>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="https://lh3.googleusercontent.com/j_RwVcM9d47aBDW5DS1VkdxUYCkDUCB6wZglv4x-9SmsxO0VaFs7Csh-FmKRCWz9r_Ef=w170" alt="Youtube Logo" class="youtube-icon"></a>
        </li>
        <li>
          <a href="#" target="_blank">
            <img src="http://www.iconarchive.com/download/i94258/designbolts/vector-foursquare/Foursquare-2.ico" alt="Foursquare Logo" class="foursquare-icon"></a>
        </li>
      </ul>
    </div>

    <div class="footer-end">
      <p>Copyright &copy; 2013-Cisco Rendon. All rights reserved.</p>
    </div>
  </footer>

БЛОГ НА HUSL

css, footer, не отображается до конца страницы

Ответы (1 шт):