How can I make the footer stay in the footer?

Navigation
2

good morning, I want to know how to put the footer down to the main, that is, when the page is too big that the footer does not appear until you go through the bar, I tried everything I searched but nothing , this is the css that I put:

css: 

.footer{
    background-image: url("../img/swirlStripes.jpg");
    color: white;
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
}

html: 

<?php $refa = base_url('assets'); ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="<?= $refa ?>/css/header.css" type="text/css">
</head>

<body>
    <div class="header">
        <div class="logo">
            <img src="<?= $refa ?>/img/HeaderV3_T1_Carta.png">
        </div>
    </div>
    <hr class="hr">
    <div class="main">
        <div>
            <div class="footer">
                <h5>Página creada por Macx®. Todos los derechos reservados.</h5>
            </div>
</body>

</html>

and it appears to me like this:

As you can see the footer shows me over the contingency that I put.

    
asked by Macx 10.07.2018 в 16:12
source

2 answers

0

You are missing% co_of% in any case here is a footer example: 

<footer class="text-center text-white">
    <p class="my-1">
      <h5>Página creada por Macx®. Todos los derechos reservados.</h5>
    </p>
</footer>

CSS: 

footer {
    position: absolute;
    bottom: 0;
    height: 60px;
    width: 100%;
}

There you have your footer bottom fixed.

Hope it helps.

    
answered by 10.07.2018 / 17:33
source
0

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 72px; /* IMPORTANTE: El margen 72px tiene que ser igual a la propiedad height que tiene el .footer */
}
.text-center{
     text-align: center;
}
.footer {
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 72px; /* Establezca la altura fija del pie de página aquí */
      line-height: 60px; /* Centra verticalmente el texto */
      background-color: rgb(151, 151, 151);
}
<!doctype html>
<html lang="es">
  <head>
    <!-- La etiqueta "meta charset=utf8"  sirve para especificar el formato de las palabras -->
    <meta charset="utf-8">
    <!-- La etiqueta "meta name=viewport con su content" sirve para hacer responsiva la página -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">  
  </head>

<body>     
        <h4> Contenido </h4> 
    
 
 <footer class="footer">
         <div class="text-center">
              <h5> MI FOOTER </h5>
         </div>
 </footer> 
 </body>
</html>
    
answered by 11.07.2018 в 04:53
Fill dataframe in R according to values of the main column and the main row Deny permission to users except the C # compiler