Footer no ocupa todo el ancho de a pesar de estar el width en 100vh y se superpone al body

publicado por: Anonymous

tengo el siguiente dilema con mi footer y body. Sucede que, estoy desarrollando las siguientes vistas pero en cierta vista (registrar usuario) mi footer cubre parte del body y ademas no ocupa en 100% del ancho, si no, como un 98%. Utilizo bootstrap, css y html y como framework CodeIgniter.

_x000D_

_x000D_

html {_x000D_
    margin: 0;_x000D_
    height: 100vh;_x000D_
}_x000D_
_x000D_
body {_x000D_
    margin: 0;_x000D_
    height: 100vh;_x000D_
    background-color: #696969;_x000D_
    color: #F8F8FF;_x000D_
}_x000D_
_x000D_
.contenedor {_x000D_
    position: relative;_x000D_
    min-height: 100vh;_x000D_
}_x000D_
_x000D_
footer {_x000D_
    width: 100vw;_x000D_
    background: black;_x000D_
    color: white;_x000D_
    text-align: justify;_x000D_
    position: absolute;_x000D_
    bottom: 0;_x000D_
}

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<!DOCTYPE html>_x000D_
<html lang="es">_x000D_
<head>_x000D_
    <meta charset="utf-8">_x000D_
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">_x000D_
      <title>Registrar Ciudadano | H.Ayuntamiento de Comalcalco</title>_x000D_
    <link href="http://localhost/proyecto/btstrp/css/normalize.css" rel="stylesheet">_x000D_
    <link href="http://localhost/proyecto/btstrp/css/bootstrap.min.css" rel="stylesheet">_x000D_
    <link href="http://localhost/proyecto/btstrp/css/estilos.css" rel="stylesheet">_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<header>_x000D_
   <div class="row">_x000D_
    <div class="container-fluid">_x000D_
    <img src="http://www.comalcalco.gob.mx/assets/img/logo_pie.png" class="img-responsive center-block">_x000D_
    </div>_x000D_
   </div>_x000D_
</header><div class="container">_x000D_
  <form id="" action="" class="">_x000D_
    <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
            <div class="form-group">_x000D_
                <label for="CURP">C U R P</label>_x000D_
                <input class="form-control" type="text" id="CURP" placeholder="C U R P">_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
    <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
             <div class="form-group">_x000D_
                 <label for="nombre">Nombre</label>_x000D_
                 <input class="form-control" type="text" id="nombre" placeholder="Nombre (s)">_x000D_
             </div>_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
    <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
            <div class="form-group">_x000D_
                <label for="ap_P">Primer Apellido</label>_x000D_
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
    <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
            <div class="form-group">_x000D_
                <label for="ap_P">Primer Apellido</label>_x000D_
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
    <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
            <div class="form-group">_x000D_
                <label for="ap_P">Primer Apellido</label>_x000D_
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
     <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
            <div class="form-group">_x000D_
                <label for="ap_M">Segundo Apellido</label>_x000D_
                <input class="form-control" type="text" id="ap_M" placeholder="Apellido Materno">_x000D_
            </div>_x000D_
        </div>_x000D_
     </div>_x000D_
_x000D_
    <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
            <div class="form-group">_x000D_
                <label for="telefono">Numero Telefonico</label>_x000D_
                <input class="form-control" type="text" id="telefono" placeholder="Numero Telefonico">_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
<div class="row">_x000D_
    <div class="col-md-5 col-md-offset-3">_x000D_
        <label>Direccion</label><br>_x000D_
            <div class="btn-group">_x000D_
            <button type="button" class="btn btn-default btn-lg">Municipio</button>_x000D_
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">_x000D_
            <span class="caret"></span>_x000D_
            </button>_x000D_
               <ul class="dropdown-menu">_x000D_
                <li><a href="#">Mun1</a></li>_x000D_
                <li><a href="#">Mun2</a></li>_x000D_
                <li><a href="#">Mun3</a></li>_x000D_
                <li><a href="#">Mun4</a></li>_x000D_
               </ul>_x000D_
            </div>_x000D_
_x000D_
    <div class="btn-group">_x000D_
            <button type="button" class="btn btn-default btn-lg">Localidad</button>_x000D_
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">_x000D_
            <span class="caret"></span>_x000D_
            </button>_x000D_
               <ul class="dropdown-menu">_x000D_
                <li><a href="#">Loc1</a></li>_x000D_
                <li><a href="#">Loc2</a></li>_x000D_
                <li><a href="#">Loc3</a></li>_x000D_
                <li><a href="#">Loc4</a></li>_x000D_
               </ul>_x000D_
    </div>_x000D_
        <div class="btn-group">_x000D_
            <button type="button" class="btn btn-default btn-lg">Colonia</button>_x000D_
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">_x000D_
            <span class="caret"></span>_x000D_
            </button>_x000D_
               <ul class="dropdown-menu">_x000D_
                <li><a href="#">Col1</a></li>_x000D_
                <li><a href="#">Col2</a></li>_x000D_
                <li><a href="#">Col3</a></li>_x000D_
                <li><a href="#">Col4</a></li>_x000D_
               </ul>_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </form>_x000D_
</div>_x000D_
_x000D_
<br>_x000D_
<div class="container">_x000D_
   <button class="btn btn-primary center-block">_x000D_
   <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>_x000D_
   Guardar</button>_x000D_
</div>_x000D_
<br>_x000D_
    <div class="contenedor">_x000D_
        <div class="container-fluid">_x000D_
        <footer>_x000D_
		    <div class="col-md-4">_x000D_
            <h4>2016-2018 &copy; Ayuntamiento Constitucional de Comalcalco._x000D_
            Todos los Derechos Reservados.</h4>_x000D_
            </div>_x000D_
_x000D_
		    <div class="col-md-4">_x000D_
			    <h2 class="title">Contactanos</h2>_x000D_
			    <p>Plaza Juárez S/N, Col. Centro. Comalcalco, Tabasco </p>_x000D_
			    <p>Código Postal: 86300</p>_x000D_
			    <p>Teléfono: (933)114-00-00</p>_x000D_
			    <p>Correo Electrónico: <a href="[email protected]">[email protected]</a></p>_x000D_
		    </div>_x000D_
_x000D_
		    <div class="col-md-4">_x000D_
			    <img src="http://www.comalcalco.gob.mx/assets/img/logo2-default.png">_x000D_
		    </div>_x000D_
		</footer>_x000D_
	    </div>_x000D_
	</div>_x000D_
</div>_x000D_
    <script src="http://localhost/proyecto/btstrp/js/modernizr.js"></script>_x000D_
    <script src="http://localhost/proyecto/btstrp/js/jquery.js"></script>_x000D_
    <script src="http://localhost/proyecto/btstrp/js/bootstrap.min.js"></script>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

solución

No puedes usar .container-fluid dentro de un .container y conseguir lo que estás tratando de lograr. Mira el código para la clase .container de Bootstrap. tiene una anchura fija.

_x000D_

_x000D_

html {_x000D_
margin: 0;_x000D_
height: 100vh;_x000D_
}_x000D_
_x000D_
body {_x000D_
margin: 0;_x000D_
height: 100vh;_x000D_
background-color: #696969;_x000D_
color: #F8F8FF;_x000D_
}_x000D_
_x000D_
.contenedor {_x000D_
position: relative;_x000D_
width: 100vh;_x000D_
}_x000D_
_x000D_
footer {_x000D_
  _x000D_
width: 100vw;_x000D_
background: black;_x000D_
color: white;_x000D_
text-align: justify;_x000D_
position: absolute;_x000D_
bottom: 50;_x000D_
}

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<!DOCTYPE html>_x000D_
<html lang="es">_x000D_
<head>_x000D_
    <meta charset="utf-8">_x000D_
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">_x000D_
      <title>Registrar Ciudadano | H.Ayuntamiento de Comalcalco</title>_x000D_
    <link href="http://localhost/proyecto/btstrp/css/normalize.css" rel="stylesheet">_x000D_
    <link href="http://localhost/proyecto/btstrp/css/bootstrap.min.css" rel="stylesheet">_x000D_
    <link href="http://localhost/proyecto/btstrp/css/estilos.css" rel="stylesheet">_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<header>_x000D_
   <div class="row">_x000D_
    <div class="container-fluid">_x000D_
    <img src="http://www.comalcalco.gob.mx/assets/img/logo_pie.png" class="img-responsive center-block">_x000D_
    </div>_x000D_
   </div>_x000D_
</header><div class="container">_x000D_
  <form id="" action="" class="">_x000D_
    <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
            <div class="form-group">_x000D_
                <label for="CURP">C U R P</label>_x000D_
                <input class="form-control" type="text" id="CURP" placeholder="C U R P">_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
    <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
             <div class="form-group">_x000D_
                 <label for="nombre">Nombre</label>_x000D_
                 <input class="form-control" type="text" id="nombre" placeholder="Nombre (s)">_x000D_
             </div>_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
    <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
            <div class="form-group">_x000D_
                <label for="ap_P">Primer Apellido</label>_x000D_
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
    <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
            <div class="form-group">_x000D_
                <label for="ap_P">Primer Apellido</label>_x000D_
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
    <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
            <div class="form-group">_x000D_
                <label for="ap_P">Primer Apellido</label>_x000D_
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
     <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
            <div class="form-group">_x000D_
                <label for="ap_M">Segundo Apellido</label>_x000D_
                <input class="form-control" type="text" id="ap_M" placeholder="Apellido Materno">_x000D_
            </div>_x000D_
        </div>_x000D_
     </div>_x000D_
_x000D_
    <div class="row">_x000D_
        <div class="col-md-6 col-md-offset-3">_x000D_
            <div class="form-group">_x000D_
                <label for="telefono">Numero Telefonico</label>_x000D_
                <input class="form-control" type="text" id="telefono" placeholder="Numero Telefonico">_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
<div class="row">_x000D_
    <div class="col-md-5 col-md-offset-3">_x000D_
        <label>Direccion</label><br>_x000D_
            <div class="btn-group">_x000D_
            <button type="button" class="btn btn-default btn-lg">Municipio</button>_x000D_
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">_x000D_
            <span class="caret"></span>_x000D_
            </button>_x000D_
               <ul class="dropdown-menu">_x000D_
                <li><a href="#">Mun1</a></li>_x000D_
                <li><a href="#">Mun2</a></li>_x000D_
                <li><a href="#">Mun3</a></li>_x000D_
                <li><a href="#">Mun4</a></li>_x000D_
               </ul>_x000D_
            </div>_x000D_
_x000D_
    <div class="btn-group">_x000D_
            <button type="button" class="btn btn-default btn-lg">Localidad</button>_x000D_
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">_x000D_
            <span class="caret"></span>_x000D_
            </button>_x000D_
               <ul class="dropdown-menu">_x000D_
                <li><a href="#">Loc1</a></li>_x000D_
                <li><a href="#">Loc2</a></li>_x000D_
                <li><a href="#">Loc3</a></li>_x000D_
                <li><a href="#">Loc4</a></li>_x000D_
               </ul>_x000D_
    </div>_x000D_
        <div class="btn-group">_x000D_
            <button type="button" class="btn btn-default btn-lg">Colonia</button>_x000D_
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">_x000D_
            <span class="caret"></span>_x000D_
            </button>_x000D_
               <ul class="dropdown-menu">_x000D_
                <li><a href="#">Col1</a></li>_x000D_
                <li><a href="#">Col2</a></li>_x000D_
                <li><a href="#">Col3</a></li>_x000D_
                <li><a href="#">Col4</a></li>_x000D_
               </ul>_x000D_
        </div>_x000D_
      </div>_x000D_
    </div>_x000D_
  </form>_x000D_
</div>_x000D_
_x000D_
<br>_x000D_
<div class="container">_x000D_
   <button class="btn btn-primary center-block">_x000D_
   <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>_x000D_
   Guardar</button>_x000D_
</div>_x000D_
<br>_x000D_
    <div class="contenedor">_x000D_
        <footer>_x000D_
		    <div class="col-md-4">_x000D_
            <h4>2016-2018 &copy; Ayuntamiento Constitucional de Comalcalco._x000D_
            Todos los Derechos Reservados.</h4>_x000D_
            </div>_x000D_
_x000D_
		    <div class="col-md-4">_x000D_
			    <h2 class="title">Contactanos</h2>_x000D_
			    <p>Plaza Juárez S/N, Col. Centro. Comalcalco, Tabasco </p>_x000D_
			    <p>Código Postal: 86300</p>_x000D_
			    <p>Teléfono: (933)114-00-00</p>_x000D_
			    <p>Correo Electrónico: <a href="[email protected]">[email protected]</a></p>_x000D_
		    </div>_x000D_
_x000D_
		    <div class="col-md-4">_x000D_
			    <img src="http://www.comalcalco.gob.mx/assets/img/logo2-default.png">_x000D_
		    </div>_x000D_
		</footer>_x000D_
	    </div>_x000D_
	</div>_x000D_
</div>_x000D_
    <script src="http://localhost/proyecto/btstrp/js/modernizr.js"></script>_x000D_
    <script src="http://localhost/proyecto/btstrp/js/jquery.js"></script>_x000D_
    <script src="http://localhost/proyecto/btstrp/js/bootstrap.min.js"></script>_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.