0

Nota: Estoy Usando el framework Boostrap 3

En pantalla de escritorio esta bien:

introducir la descripción de la imagen aquí

Pero en dispositivo móviles no aparece al final:

introducir la descripción de la imagen aquí

Este es el código html que tengo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Productos</title>

<?php include 'includes/head_comun.php'; ?>

</head>

<?php include 'includes/encabezado.php'; ?>

<div class="container" >
<br><br>


<div class="panel panel-success">
  <div class="panel-heading" align="center"><h3>PRODUCTOS</h3>
  </div>
  <br>
  <div class="panel-body">

   <div class="row" align="center">
    <button type="button"  class="btn btn-success" data-toggle="modal" data-target="#nuevo"><span class="glyphicon glyphicon-user"></span>
      Nuevo Producto
    </button>
  </div>
  <br>
  <div class="table-responsive">

    <table id="grid" class="table table-hover table-condensed nowrap dt-responsive table-bordered" cellpadding="0">

      <thead>
        <tr class="active">
          <th>Codigo</th>
          <th >Nombre</th>
          <th>Cantidad</th>
          <th>Valor Unitario</th>
          <th>Valor</th>
          <th>Kardex</th>
          <th>Opciones</th>

        </tr>
      </thead>
      <?php

      foreach($matrizProductos as $producto):  ?>

      <tr>

       <td><?php echo $producto["cod_producto"]?></td>
       <td><?php echo $producto["nombre"]?></td>
       <td><?php echo $producto["cantidad"]?></td>
       <td><?php echo $producto["valor_unitario"]?></td>
       <td><?php echo $producto["valor"]?></td>


       <td><a href="vista/ver_movimientos.php?id_producto=<?php echo $producto["id_producto"]?>">Ver Movimientos</a>

        <a href="vista/frm_movimiento.php?id_producto=<?php echo $producto["id_producto"] ?>"><input type="button" value="Acción" class="btn btn-warning"></a>

       </td>

       <td>

         <a href="vista/frm_editar.php?id_producto=<?php echo $producto["id_producto"]?>"><input type='button' name='edi' value='Editar' class="btn btn-info"></a>

         <a href="modelo/borrar.php?id_producto=<?php echo $producto["id_producto"]?>"><input type='button' name='del' value='Eliminar' class="btn btn-danger"></a>

       </td>
     </tr>
   <?php endforeach; ?>
 </table>
 </div>

 <!-- Modal new -->
 <div class="modal fade" id="nuevo" tabindex="-1" role="dialog" >
 <div class="modal-dialog" role="document">
  <div class="modal-content">

    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">Nuevo Producto</h4>
    </div>

    <div class="modal-body">

      <form  role="form" style="margin:0 auto" class="form-horizontal" method="POST" action="modelo/insertar.php">

        <div class="form-group" >
          <label class="col-sm-2 control-label">Codigo</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" name="cod" placeholder="Ingrese Codigo" required>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Nombre</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" name="nomb" placeholder="Ingrese nombre"  required>
          </div>
        </div>

        <div class="modal-footer">
          <button type="submit" name="agregar" class="btn btn-success">Agregar</button>
          <button type="reset" name="limpiar" class="btn btn-primary">Limpiar</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>

        </div>

      </form>
    </div>
  </div>
</div>
<!--end modal new-->   </div>

Este es el codigo de piePagina.php:

<footer >
<h4 class="muted credit" id="pie">&copy <?php echo date('Y');?> <a href="https://www.instagram.com/juanzu10/" style="text-decoration: none;" id="sincolor" target="_blank"> - Juanzu. </a></h4>
</footer>

Codigo CSS:

html, body{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro',
'Helvetica Neue',
Helvetica, Arial, sans-serief;
}

.navbar{
margin-bottom: 0;
}
th{
text-align: center;
}
td{
text-align: center;
}


footer {
height:50px;
line-height:50px;
background:black;
color:white;
text-align:center;
position:absolute;
bottom:0;
left:0;
width:100%;}

#sincolor{
color: #086108;
}

@media screen and (max-width: 768px){
.post .thumb {
width: 100%;
margin-bottom: 20px;
margin-right: 0;
}
}

2 respuestas 2

3

En vez de utilizar una position: absolute; para posesionar tu elemento siempre abajo utiliza position: fixed;, ya que este último se posiciona de forma relativa a la ventana del navegador.

    html, body{
	height: 100%;
	margin: 0;
	padding: 0;
 	font-family: 'Source Sans Pro',
    'Helvetica Neue',
	Helvetica, Arial, sans-serief;
    }

    .navbar{
    margin-bottom: 0;
    }
    th{
    text-align: center;
    }
    td{
    text-align: center;
    }


    footer {
    height:50px;
    line-height:50px;
    background:black;
    color:white;
    text-align:center;
    position: fixed
    bottom:0;
    left:0;
    width:100%;}

    #sincolor{
    color: #086108;
    }

    @media screen and (max-width: 768px){
    .post .thumb {
    width: 100%;
    margin-bottom: 20px;
    margin-right: 0;
    }
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Productos</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   

    </head>
 <body>


    <div class="container" >
    <br><br>


    <div class="panel panel-success">
      <div class="panel-heading" align="center"><h3>PRODUCTOS</h3>
      </div>
      <br>
      <div class="panel-body">

       <div class="row" align="center">
        <button type="button"  class="btn btn-success" data-toggle="modal" data-target="#nuevo"><span class="glyphicon glyphicon-user"></span>
          Nuevo Producto
        </button>
      </div>
      <br>
      <div class="table-responsive">

        <table id="grid" class="table table-hover table-condensed nowrap dt-responsive table-bordered" cellpadding="0">

          <thead>
            <tr class="active">
              <th>Codigo</th>
              <th >Nombre</th>
              <th>Cantidad</th>
              <th>Valor Unitario</th>
              <th>Valor</th>
              <th>Kardex</th>
              <th>Opciones</th>

            </tr>
          </thead>
          <?php

          foreach($matrizProductos as $producto):  ?>

          <tr>

           <td><?php echo $producto["cod_producto"]?></td>
           <td><?php echo $producto["nombre"]?></td>
           <td><?php echo $producto["cantidad"]?></td>
           <td><?php echo $producto["valor_unitario"]?></td>
           <td><?php echo $producto["valor"]?></td>


           <td><a href="vista/ver_movimientos.php?id_producto=<?php echo $producto["id_producto"]?>">Ver Movimientos</a>

            <a href="vista/frm_movimiento.php?id_producto=<?php echo $producto["id_producto"] ?>"><input type="button" value="Acción" class="btn btn-warning"></a>

           </td>

           <td>

             <a href="vista/frm_editar.php?id_producto=<?php echo $producto["id_producto"]?>"><input type='button' name='edi' value='Editar' class="btn btn-info"></a>

             <a href="modelo/borrar.php?id_producto=<?php echo $producto["id_producto"]?>"><input type='button' name='del' value='Eliminar' class="btn btn-danger"></a>

           </td>
         </tr>
       <?php endforeach; ?>
     </table>
     </div>

     <!-- Modal new -->
     <div class="modal fade" id="nuevo" tabindex="-1" role="dialog" >
     <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Nuevo Producto</h4>
        </div>

        <div class="modal-body">

          <form  role="form" style="margin:0 auto" class="form-horizontal" method="POST" action="modelo/insertar.php">

            <div class="form-group" >
              <label class="col-sm-2 control-label">Codigo</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="cod" placeholder="Ingrese Codigo" required>
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">Nombre</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="nomb" placeholder="Ingrese nombre"  required>
              </div>
            </div>

            <div class="modal-footer">
              <button type="submit" name="agregar" class="btn btn-success">Agregar</button>
              <button type="reset" name="limpiar" class="btn btn-primary">Limpiar</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>

            </div>

          </form>
        </div>
      </div>
    </div>
    <!--end modal new-->   </div>

  </div>
</div>
</div>

<?php include 'includes/piePagina.php'; ?>
<footer >
	<h4 class="muted credit" id="pie">&copy <?php echo date('Y');?> <a href="https://www.instagram.com/juanzu10/" style="text-decoration: none;" id="sincolor" target="_blank"> - Juanzu. </a></h4>
	</footer>
</body>
</html>

Te dejo un link donde hablan sobre las posiciones css.

3
  • Si es una de las soluciones, pero será que habrá una donde siempre me muestre abajo sin necesidad de estar bajando con el scrool. Espero que me haga entender.
    – Juanzu
    el 27 jun. 2017 a las 19:39
  • quieres una area scrollable que se mantenga tu footer y tu header @Juanzu el 27 jun. 2017 a las 19:41
  • @JackNavaRow Exacto!
    – Juanzu
    el 27 jun. 2017 a las 19:46
1

html
{
    overflow: hidden;
    height: 100%;
}

body
{
    padding: 60px 0px;
    height: 100%;
    box-sizing: border-box;
}

header, footer
{
    background: #72CEF2;
    padding: 9px 0;
    width: 100%;
    position: fixed;
    height: 40px;
    text-align: center;
}

header{top:0;}
footer{bottom:0;}

div[role="main"]
{
    overflow-y: scroll;
    height: 100%;
}

section
{
    width: 400px;
    margin: 0 auto;
}
<body>
    <header>Title</header>
    <div role="main">
        <section>
Hello<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 />World!
        </section>
    </div>
    <footer>copyright</footer>
</body>

merito a https://stackoverflow.com/questions/13741871/how-to-get-a-scrollbar-in-a-div-with-fixed-header-and-footer?rq=1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.