Skip to main content
Publicación cerrada como "Duplicada" por Pikoh, Shaz, hubman, fredyfx, Francisco Romero
se añadieron 117 caracteres en el cuerpo
Origen Enlace
hubman
  • 2.7k
  • 13
  • 44
  • 96

Intento poner este footer siempre abajo con estilos aplicandole a la clase footer.

El footer baja pero mientras mas grande se hace el footer mas arriba se posiciona, y eso es lo que no quiero

Intento poner este footer siempre abajo con estilos aplicandole a la clase footer

Intento poner este footer siempre abajo con estilos aplicandole a la clase footer.

El footer baja pero mientras mas grande se hace el footer mas arriba se posiciona, y eso es lo que no quiero

se eliminaron 536 caracteres en el cuerpo
Origen Enlace
hubman
  • 2.7k
  • 13
  • 44
  • 96
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
footer {
  background-color: #0c1a1e;
  min-height: 350px;
  font-family: 'Open Sans', sans-serif;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
  height: 500px
}

.footerleft {
  margin-top: 50px;5px;
  padding: 0 36px;
}

.logofooter {
  margin-bottom: 10px;
  font-size: 25px;
  color: #fff;
  font-weight: 700;
}

.footerleft p {
  color: #fff;
  font-size: 12px !important;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 15px;
}

.footerleft p i {
  width: 20px;
  color: #999;
}

.paddingtop-bottom {
  margin-top: 50px;
}

.footer-ul {
  list-style-type: none;
  padding-left: 0px;
  margin-left: 2px;
}

.footer-ul li {
  line-height: 29px;
  font-size: 12px;
}

.footer-ul li a {
  color: #a0a3a4;
  transition: color 0.2s linear 0s, background 0.2s linear 0s;
}

.footer-ul i {
  margin-right: 10px;
}

.footer-ul li a:hover {
  transition: color 0.2s linear 0s, background 0.2s linear 0s;
  color: #ff670f;
}

.social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.icon-ul {
  list-style-type: none !important;
  margin: 0px;
  padding: 0px;
}

.icon-ul li {
  line-height: 75px;
  width: 100%;
  float: left;
}

.icon {
  float: left;
  margin-right: 5px;
}

.copyright {
  min-height: 40px;
  background-color: #000000;
}

.copyright p {
  text-align: left;
  color: #FFF;
  padding: 10px 0;
  margin-bottom: 0px;
}

.heading7 {
  font-size: 21px;
  font-weight: 700;
  color: #d9d6d6;
  margin-bottom: 22px;
}

.post p {
  font-size: 12px;
  color: #FFF;
  line-height: 20px;
}

.post p span {
  display: block;
  color: #8f8f8f;
}

.bottom_ul {
  list-style-type: none;
  float: right;
  margin-bottom: 0px;
}

.bottom_ul li {
  float: left;
  line-height: 40px;
}

.bottom_ul li:after {
  content: "/";
  color: #FFF;
  margin-right: 8px;
  margin-left: 8px;
}

.bottom_ul li a {
  color: #FFF;
  font-size: 12px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<!--footer start from here-->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-6 footerleft ">
        <div class="logofooter"> Logo</div>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
        <p><i class="fa fa-map-pin"></i> 210, Aggarwal Tower, Rohini sec 9, New Delhi -        110085, INDIA</p>
        <p><i class="fa fa-phone"></i> Phone (India) : +91 9999 878 398</p>
        <p><i class="fa fa-envelope"></i> E-mail : [email protected]</p>

      </div>
      <div class="col-md-2 col-sm-6 paddingtop-bottom">
        <h6 class="heading7">GENERAL LINKS</h6>
        <ul class="footer-ul">
          <li><a href="#"> Career</a></li>
          <li><a href="#"> Privacy Policy</a></li>
          <li><a href="#"> Terms & Conditions</a></li>
          <li><a href="#"> Client Gateway</a></li>
          <li><a href="#"> Ranking</a></li>
          <li><a href="#"> Case Studies</a></li>
          <li><a href="#"> Frequently Ask Questions</a></li>
        </ul>
      </div>
      <div class="col-md-3 col-sm-6 paddingtop-bottom">
        <h6 class="heading7">LATEST POST</h6>
        <div class="post">
          <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
          <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
          <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 paddingtop-bottom">
        <div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-height="300" data-small-header="false" style="margin-bottom:15px;" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
          <div class="fb-xfbml-parse-ignore">
            <blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>
<!--footer start from here-->

<div class="copyright">
  <div class="container">
    <div class="col-md-6">
      <p>© 2016 - All Rights with Webenlance</p>
    </div>
    <div class="col-md-6">
      <ul class="bottom_ul">
        <li><a href="#">webenlance.com</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Faq's</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Site Map</a></li>
      </ul>
    </div>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
footer {
  background-color: #0c1a1e;
  min-height: 350px;
  font-family: 'Open Sans', sans-serif;
}

.footerleft {
  margin-top: 50px;
  padding: 0 36px;
}

.logofooter {
  margin-bottom: 10px;
  font-size: 25px;
  color: #fff;
  font-weight: 700;
}

.footerleft p {
  color: #fff;
  font-size: 12px !important;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 15px;
}

.footerleft p i {
  width: 20px;
  color: #999;
}

.paddingtop-bottom {
  margin-top: 50px;
}

.footer-ul {
  list-style-type: none;
  padding-left: 0px;
  margin-left: 2px;
}

.footer-ul li {
  line-height: 29px;
  font-size: 12px;
}

.footer-ul li a {
  color: #a0a3a4;
  transition: color 0.2s linear 0s, background 0.2s linear 0s;
}

.footer-ul i {
  margin-right: 10px;
}

.footer-ul li a:hover {
  transition: color 0.2s linear 0s, background 0.2s linear 0s;
  color: #ff670f;
}

.social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.icon-ul {
  list-style-type: none !important;
  margin: 0px;
  padding: 0px;
}

.icon-ul li {
  line-height: 75px;
  width: 100%;
  float: left;
}

.icon {
  float: left;
  margin-right: 5px;
}

.copyright {
  min-height: 40px;
  background-color: #000000;
}

.copyright p {
  text-align: left;
  color: #FFF;
  padding: 10px 0;
  margin-bottom: 0px;
}

.heading7 {
  font-size: 21px;
  font-weight: 700;
  color: #d9d6d6;
  margin-bottom: 22px;
}

.post p {
  font-size: 12px;
  color: #FFF;
  line-height: 20px;
}

.post p span {
  display: block;
  color: #8f8f8f;
}

.bottom_ul {
  list-style-type: none;
  float: right;
  margin-bottom: 0px;
}

.bottom_ul li {
  float: left;
  line-height: 40px;
}

.bottom_ul li:after {
  content: "/";
  color: #FFF;
  margin-right: 8px;
  margin-left: 8px;
}

.bottom_ul li a {
  color: #FFF;
  font-size: 12px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<!--footer start from here-->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-6 footerleft ">
        <div class="logofooter"> Logo</div>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
        <p><i class="fa fa-map-pin"></i> 210, Aggarwal Tower, Rohini sec 9, New Delhi -        110085, INDIA</p>
        <p><i class="fa fa-phone"></i> Phone (India) : +91 9999 878 398</p>
        <p><i class="fa fa-envelope"></i> E-mail : [email protected]</p>

      </div>
      <div class="col-md-2 col-sm-6 paddingtop-bottom">
        <h6 class="heading7">GENERAL LINKS</h6>
        <ul class="footer-ul">
          <li><a href="#"> Career</a></li>
          <li><a href="#"> Privacy Policy</a></li>
          <li><a href="#"> Terms & Conditions</a></li>
          <li><a href="#"> Client Gateway</a></li>
          <li><a href="#"> Ranking</a></li>
          <li><a href="#"> Case Studies</a></li>
          <li><a href="#"> Frequently Ask Questions</a></li>
        </ul>
      </div>
      <div class="col-md-3 col-sm-6 paddingtop-bottom">
        <h6 class="heading7">LATEST POST</h6>
        <div class="post">
          <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
          <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
          <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 paddingtop-bottom">
        <div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-height="300" data-small-header="false" style="margin-bottom:15px;" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
          <div class="fb-xfbml-parse-ignore">
            <blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>
<!--footer start from here-->

<div class="copyright">
  <div class="container">
    <div class="col-md-6">
      <p>© 2016 - All Rights with Webenlance</p>
    </div>
    <div class="col-md-6">
      <ul class="bottom_ul">
        <li><a href="#">webenlance.com</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Faq's</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Site Map</a></li>
      </ul>
    </div>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
footer {
  background-color: #0c1a1e;
  font-family: 'Open Sans', sans-serif;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
  height: 500px
}

.footerleft {
  margin-top: 5px;
  padding: 0 36px;
}

.logofooter {
  margin-bottom: 10px;
  font-size: 25px;
  color: #fff;
  font-weight: 700;
}

.footerleft p {
  color: #fff;
  font-size: 12px !important;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 15px;
}

.footerleft p i {
  width: 20px;
  color: #999;
}

.paddingtop-bottom {
  margin-top: 50px;
}

.footer-ul {
  list-style-type: none;
  padding-left: 0px;
  margin-left: 2px;
}

.footer-ul li {
  line-height: 29px;
  font-size: 12px;
}

.footer-ul li a {
  color: #a0a3a4;
  transition: color 0.2s linear 0s, background 0.2s linear 0s;
}

.footer-ul i {
  margin-right: 10px;
}

.footer-ul li a:hover {
  transition: color 0.2s linear 0s, background 0.2s linear 0s;
  color: #ff670f;
}

.social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.icon-ul {
  list-style-type: none !important;
  margin: 0px;
  padding: 0px;
}

.icon-ul li {
  line-height: 75px;
  width: 100%;
  float: left;
}

.icon {
  float: left;
  margin-right: 5px;
}

.copyright {
  min-height: 40px;
  background-color: #000000;
}

.copyright p {
  text-align: left;
  color: #FFF;
  padding: 10px 0;
  margin-bottom: 0px;
}

.heading7 {
  font-size: 21px;
  font-weight: 700;
  color: #d9d6d6;
  margin-bottom: 22px;
}

.post p {
  font-size: 12px;
  color: #FFF;
  line-height: 20px;
}

.post p span {
  display: block;
  color: #8f8f8f;
}

.bottom_ul {
  list-style-type: none;
  float: right;
  margin-bottom: 0px;
}

.bottom_ul li {
  float: left;
  line-height: 40px;
}

.bottom_ul li:after {
  content: "/";
  color: #FFF;
  margin-right: 8px;
  margin-left: 8px;
}

.bottom_ul li a {
  color: #FFF;
  font-size: 12px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<!--footer start from here-->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-6 footerleft ">
        <div class="logofooter"> Logo</div>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
        <p><i class="fa fa-map-pin"></i> 210, Aggarwal Tower, Rohini sec 9, New Delhi -        110085, INDIA</p>
        <p><i class="fa fa-phone"></i> Phone (India) : +91 9999 878 398</p>
        <p><i class="fa fa-envelope"></i> E-mail : [email protected]</p>

      </div>
      <div class="col-md-2 col-sm-6 paddingtop-bottom">
        <h6 class="heading7">GENERAL LINKS</h6>
        <ul class="footer-ul">
          <li><a href="#"> Career</a></li>
          <li><a href="#"> Privacy Policy</a></li>
         
        </ul>
      </div>
      <div class="col-md-3 col-sm-6 paddingtop-bottom">
        <h6 class="heading7">LATEST POST</h6>
        <div class="post">
          <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
         
      </div>
      <div class="col-md-3 col-sm-6 paddingtop-bottom">
        <div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-height="300" data-small-header="false" style="margin-bottom:15px;" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
          <div class="fb-xfbml-parse-ignore">
            <blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>
<!--footer start from here-->

<div class="copyright">
  <div class="container">
    <div class="col-md-6">
      <p>© 2016 - All Rights with Webenlance</p>
    </div>
    <div class="col-md-6">
      <ul class="bottom_ul">
        <li><a href="#">webenlance.com</a></li>
        <li><a href="#">About us</a></li>
      </ul>
    </div>
  </div>
</div>
Origen Enlace
hubman
  • 2.7k
  • 13
  • 44
  • 96

footer siempre abajo

Intento poner este footer siempre abajo con estilos aplicandole a la clase footer

footer(style='position: fixed;\n' +
    '    left: 0;\n' +
    '    bottom: 0;\n' +
    '    width: 100%;\n' +
    '    background-color: red;\n' +
    '    color: white;\n' +
    '    text-align: center; height:300px   ')

pero no funciona

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
footer {
  background-color: #0c1a1e;
  min-height: 350px;
  font-family: 'Open Sans', sans-serif;
}

.footerleft {
  margin-top: 50px;
  padding: 0 36px;
}

.logofooter {
  margin-bottom: 10px;
  font-size: 25px;
  color: #fff;
  font-weight: 700;
}

.footerleft p {
  color: #fff;
  font-size: 12px !important;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 15px;
}

.footerleft p i {
  width: 20px;
  color: #999;
}

.paddingtop-bottom {
  margin-top: 50px;
}

.footer-ul {
  list-style-type: none;
  padding-left: 0px;
  margin-left: 2px;
}

.footer-ul li {
  line-height: 29px;
  font-size: 12px;
}

.footer-ul li a {
  color: #a0a3a4;
  transition: color 0.2s linear 0s, background 0.2s linear 0s;
}

.footer-ul i {
  margin-right: 10px;
}

.footer-ul li a:hover {
  transition: color 0.2s linear 0s, background 0.2s linear 0s;
  color: #ff670f;
}

.social:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.icon-ul {
  list-style-type: none !important;
  margin: 0px;
  padding: 0px;
}

.icon-ul li {
  line-height: 75px;
  width: 100%;
  float: left;
}

.icon {
  float: left;
  margin-right: 5px;
}

.copyright {
  min-height: 40px;
  background-color: #000000;
}

.copyright p {
  text-align: left;
  color: #FFF;
  padding: 10px 0;
  margin-bottom: 0px;
}

.heading7 {
  font-size: 21px;
  font-weight: 700;
  color: #d9d6d6;
  margin-bottom: 22px;
}

.post p {
  font-size: 12px;
  color: #FFF;
  line-height: 20px;
}

.post p span {
  display: block;
  color: #8f8f8f;
}

.bottom_ul {
  list-style-type: none;
  float: right;
  margin-bottom: 0px;
}

.bottom_ul li {
  float: left;
  line-height: 40px;
}

.bottom_ul li:after {
  content: "/";
  color: #FFF;
  margin-right: 8px;
  margin-left: 8px;
}

.bottom_ul li a {
  color: #FFF;
  font-size: 12px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<!--footer start from here-->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-6 footerleft ">
        <div class="logofooter"> Logo</div>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
        <p><i class="fa fa-map-pin"></i> 210, Aggarwal Tower, Rohini sec 9, New Delhi -        110085, INDIA</p>
        <p><i class="fa fa-phone"></i> Phone (India) : +91 9999 878 398</p>
        <p><i class="fa fa-envelope"></i> E-mail : [email protected]</p>

      </div>
      <div class="col-md-2 col-sm-6 paddingtop-bottom">
        <h6 class="heading7">GENERAL LINKS</h6>
        <ul class="footer-ul">
          <li><a href="#"> Career</a></li>
          <li><a href="#"> Privacy Policy</a></li>
          <li><a href="#"> Terms & Conditions</a></li>
          <li><a href="#"> Client Gateway</a></li>
          <li><a href="#"> Ranking</a></li>
          <li><a href="#"> Case Studies</a></li>
          <li><a href="#"> Frequently Ask Questions</a></li>
        </ul>
      </div>
      <div class="col-md-3 col-sm-6 paddingtop-bottom">
        <h6 class="heading7">LATEST POST</h6>
        <div class="post">
          <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
          <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
          <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 paddingtop-bottom">
        <div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-height="300" data-small-header="false" style="margin-bottom:15px;" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
          <div class="fb-xfbml-parse-ignore">
            <blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>
<!--footer start from here-->

<div class="copyright">
  <div class="container">
    <div class="col-md-6">
      <p>© 2016 - All Rights with Webenlance</p>
    </div>
    <div class="col-md-6">
      <ul class="bottom_ul">
        <li><a href="#">webenlance.com</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Faq's</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Site Map</a></li>
      </ul>
    </div>
  </div>
</div>