Footer does not occupy all the width of despite being the width in 100vh and it is superimposed on the body

Navigation
0

I have the following dilemma with my footer and body. It happens that, I am developing the following views but in a certain view (register user) my footer covers part of the body and also does not occupy 100% of the width, if not, like 98%. I use bootstrap, css and html and as CodeIgniter framework. 

html {
    margin: 0;
    height: 100vh;
}

body {
    margin: 0;
    height: 100vh;
    background-color: #696969;
    color: #F8F8FF;
}

.contenedor {
    position: relative;
    min-height: 100vh;
}

footer {
    width: 100vw;
    background: black;
    color: white;
    text-align: justify;
    position: absolute;
    bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Registrar Ciudadano | H.Ayuntamiento de Comalcalco</title>
    <link href="http://localhost/proyecto/btstrp/css/normalize.css" rel="stylesheet">
    <link href="http://localhost/proyecto/btstrp/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://localhost/proyecto/btstrp/css/estilos.css" rel="stylesheet">
</head>
<body>

<header>
   <div class="row">
    <div class="container-fluid">
    <img src="http://www.comalcalco.gob.mx/assets/img/logo_pie.png" class="img-responsive center-block">
    </div>
   </div>
</header><div class="container">
  <form id="" action="" class="">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="CURP">C U R P</label>
                <input class="form-control" type="text" id="CURP" placeholder="C U R P">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
             <div class="form-group">
                 <label for="nombre">Nombre</label>
                 <input class="form-control" type="text" id="nombre" placeholder="Nombre (s)">
             </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="ap_P">Primer Apellido</label>
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="ap_P">Primer Apellido</label>
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="ap_P">Primer Apellido</label>
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">
            </div>
        </div>
    </div>

     <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="ap_M">Segundo Apellido</label>
                <input class="form-control" type="text" id="ap_M" placeholder="Apellido Materno">
            </div>
        </div>
     </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="telefono">Numero Telefonico</label>
                <input class="form-control" type="text" id="telefono" placeholder="Numero Telefonico">
            </div>
        </div>
    </div>

<div class="row">
    <div class="col-md-5 col-md-offset-3">
        <label>Direccion</label><br>
            <div class="btn-group">
            <button type="button" class="btn btn-default btn-lg">Municipio</button>
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">
            <span class="caret"></span>
            </button>
               <ul class="dropdown-menu">
                <li><a href="#">Mun1</a></li>
                <li><a href="#">Mun2</a></li>
                <li><a href="#">Mun3</a></li>
                <li><a href="#">Mun4</a></li>
               </ul>
            </div>

    <div class="btn-group">
            <button type="button" class="btn btn-default btn-lg">Localidad</button>
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">
            <span class="caret"></span>
            </button>
               <ul class="dropdown-menu">
                <li><a href="#">Loc1</a></li>
                <li><a href="#">Loc2</a></li>
                <li><a href="#">Loc3</a></li>
                <li><a href="#">Loc4</a></li>
               </ul>
    </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default btn-lg">Colonia</button>
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">
            <span class="caret"></span>
            </button>
               <ul class="dropdown-menu">
                <li><a href="#">Col1</a></li>
                <li><a href="#">Col2</a></li>
                <li><a href="#">Col3</a></li>
                <li><a href="#">Col4</a></li>
               </ul>
        </div>
      </div>
    </div>
  </form>
</div>

<br>
<div class="container">
   <button class="btn btn-primary center-block">
   <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
   Guardar</button>
</div>
<br>
    <div class="contenedor">
        <div class="container-fluid">
        <footer>
		    <div class="col-md-4">
            <h4>2016-2018 &copy; Ayuntamiento Constitucional de Comalcalco.
            Todos los Derechos Reservados.</h4>
            </div>

		    <div class="col-md-4">
			    <h2 class="title">Contactanos</h2>
			    <p>Plaza Juárez S/N, Col. Centro. Comalcalco, Tabasco </p>
			    <p>Código Postal: 86300</p>
			    <p>Teléfono: (933)114-00-00</p>
			    <p>Correo Electrónico: <a href="[email protected]">[email protected]</a></p>
		    </div>

		    <div class="col-md-4">
			    <img src="http://www.comalcalco.gob.mx/assets/img/logo2-default.png">
		    </div>
		</footer>
	    </div>
	</div>
</div>
    <script src="http://localhost/proyecto/btstrp/js/modernizr.js"></script>
    <script src="http://localhost/proyecto/btstrp/js/jquery.js"></script>
    <script src="http://localhost/proyecto/btstrp/js/bootstrap.min.js"></script>
</body>

</html>
    
asked by RMustang 14.09.2017 в 19:19
source

3 answers

0

You can not use .container-fluid inside a .container and get what you're trying to achieve. Look at the code for the Bootstrap .container class. It has a fixed width. 

html {
margin: 0;
height: 100vh;
}

body {
margin: 0;
height: 100vh;
background-color: #696969;
color: #F8F8FF;
}

.contenedor {
position: relative;
width: 100vh;
}

footer {
  
width: 100vw;
background: black;
color: white;
text-align: justify;
position: absolute;
bottom: 50;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Registrar Ciudadano | H.Ayuntamiento de Comalcalco</title>
    <link href="http://localhost/proyecto/btstrp/css/normalize.css" rel="stylesheet">
    <link href="http://localhost/proyecto/btstrp/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://localhost/proyecto/btstrp/css/estilos.css" rel="stylesheet">
</head>
<body>

<header>
   <div class="row">
    <div class="container-fluid">
    <img src="http://www.comalcalco.gob.mx/assets/img/logo_pie.png" class="img-responsive center-block">
    </div>
   </div>
</header><div class="container">
  <form id="" action="" class="">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="CURP">C U R P</label>
                <input class="form-control" type="text" id="CURP" placeholder="C U R P">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
             <div class="form-group">
                 <label for="nombre">Nombre</label>
                 <input class="form-control" type="text" id="nombre" placeholder="Nombre (s)">
             </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="ap_P">Primer Apellido</label>
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="ap_P">Primer Apellido</label>
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="ap_P">Primer Apellido</label>
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">
            </div>
        </div>
    </div>

     <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="ap_M">Segundo Apellido</label>
                <input class="form-control" type="text" id="ap_M" placeholder="Apellido Materno">
            </div>
        </div>
     </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="telefono">Numero Telefonico</label>
                <input class="form-control" type="text" id="telefono" placeholder="Numero Telefonico">
            </div>
        </div>
    </div>

<div class="row">
    <div class="col-md-5 col-md-offset-3">
        <label>Direccion</label><br>
            <div class="btn-group">
            <button type="button" class="btn btn-default btn-lg">Municipio</button>
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">
            <span class="caret"></span>
            </button>
               <ul class="dropdown-menu">
                <li><a href="#">Mun1</a></li>
                <li><a href="#">Mun2</a></li>
                <li><a href="#">Mun3</a></li>
                <li><a href="#">Mun4</a></li>
               </ul>
            </div>

    <div class="btn-group">
            <button type="button" class="btn btn-default btn-lg">Localidad</button>
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">
            <span class="caret"></span>
            </button>
               <ul class="dropdown-menu">
                <li><a href="#">Loc1</a></li>
                <li><a href="#">Loc2</a></li>
                <li><a href="#">Loc3</a></li>
                <li><a href="#">Loc4</a></li>
               </ul>
    </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default btn-lg">Colonia</button>
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">
            <span class="caret"></span>
            </button>
               <ul class="dropdown-menu">
                <li><a href="#">Col1</a></li>
                <li><a href="#">Col2</a></li>
                <li><a href="#">Col3</a></li>
                <li><a href="#">Col4</a></li>
               </ul>
        </div>
      </div>
    </div>
  </form>
</div>

<br>
<div class="container">
   <button class="btn btn-primary center-block">
   <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
   Guardar</button>
</div>
<br>
    <div class="contenedor">
        <footer>
		    <div class="col-md-4">
            <h4>2016-2018 &copy; Ayuntamiento Constitucional de Comalcalco.
            Todos los Derechos Reservados.</h4>
            </div>

		    <div class="col-md-4">
			    <h2 class="title">Contactanos</h2>
			    <p>Plaza Juárez S/N, Col. Centro. Comalcalco, Tabasco </p>
			    <p>Código Postal: 86300</p>
			    <p>Teléfono: (933)114-00-00</p>
			    <p>Correo Electrónico: <a href="[email protected]">[email protected]</a></p>
		    </div>

		    <div class="col-md-4">
			    <img src="http://www.comalcalco.gob.mx/assets/img/logo2-default.png">
		    </div>
		</footer>
	    </div>
	</div>
</div>
    <script src="http://localhost/proyecto/btstrp/js/modernizr.js"></script>
    <script src="http://localhost/proyecto/btstrp/js/jquery.js"></script>
    <script src="http://localhost/proyecto/btstrp/js/bootstrap.min.js"></script>
</body>

</html>
    
answered by 14.09.2017 / 19:50
source
0

Your problem is the misuse of container and container-fluid in the footer, I hope I have corrected your problem, I'll give you a guide: link 

html {
margin: 0;
height: 100vh;
}

body {
margin: 0;
height: 100vh;
background-color: #696969;
color: #F8F8FF;
}

.contenedor {
position: relative;
width: 100vh;
}

footer {
  
width: 100vw;
background: black;
color: white;
text-align: justify;
position: absolute;
bottom: 50;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Registrar Ciudadano | H.Ayuntamiento de Comalcalco</title>
    <link href="http://localhost/proyecto/btstrp/css/normalize.css" rel="stylesheet">
    <link href="http://localhost/proyecto/btstrp/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://localhost/proyecto/btstrp/css/estilos.css" rel="stylesheet">
</head>
<body>

<header>
   <div class="row">
    <div class="container-fluid">
    <img src="http://www.comalcalco.gob.mx/assets/img/logo_pie.png" class="img-responsive center-block">
    </div>
   </div>
</header><div class="container">
  <form id="" action="" class="">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="CURP">C U R P</label>
                <input class="form-control" type="text" id="CURP" placeholder="C U R P">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
             <div class="form-group">
                 <label for="nombre">Nombre</label>
                 <input class="form-control" type="text" id="nombre" placeholder="Nombre (s)">
             </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="ap_P">Primer Apellido</label>
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="ap_P">Primer Apellido</label>
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="ap_P">Primer Apellido</label>
                <input class="form-control" type="text" id="ap_P" placeholder="Apellido Paterno">
            </div>
        </div>
    </div>

     <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="ap_M">Segundo Apellido</label>
                <input class="form-control" type="text" id="ap_M" placeholder="Apellido Materno">
            </div>
        </div>
     </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="telefono">Numero Telefonico</label>
                <input class="form-control" type="text" id="telefono" placeholder="Numero Telefonico">
            </div>
        </div>
    </div>

<div class="row">
    <div class="col-md-5 col-md-offset-3">
        <label>Direccion</label><br>
            <div class="btn-group">
            <button type="button" class="btn btn-default btn-lg">Municipio</button>
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">
            <span class="caret"></span>
            </button>
               <ul class="dropdown-menu">
                <li><a href="#">Mun1</a></li>
                <li><a href="#">Mun2</a></li>
                <li><a href="#">Mun3</a></li>
                <li><a href="#">Mun4</a></li>
               </ul>
            </div>

    <div class="btn-group">
            <button type="button" class="btn btn-default btn-lg">Localidad</button>
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">
            <span class="caret"></span>
            </button>
               <ul class="dropdown-menu">
                <li><a href="#">Loc1</a></li>
                <li><a href="#">Loc2</a></li>
                <li><a href="#">Loc3</a></li>
                <li><a href="#">Loc4</a></li>
               </ul>
    </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default btn-lg">Colonia</button>
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopu="true" aria-expanded="false">
            <span class="caret"></span>
            </button>
               <ul class="dropdown-menu">
                <li><a href="#">Col1</a></li>
                <li><a href="#">Col2</a></li>
                <li><a href="#">Col3</a></li>
                <li><a href="#">Col4</a></li>
               </ul>
        </div>
      </div>
    </div>
  </form>
</div>

<br>
<div class="container">
   <button class="btn btn-primary center-block">
   <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
   Guardar</button>
</div>
<br>
    <div class="contenedor">
        <footer>
		    <div class="col-md-4">
            <h4>2016-2018 &copy; Ayuntamiento Constitucional de Comalcalco.
            Todos los Derechos Reservados.</h4>
            </div>

		    <div class="col-md-4">
			    <h2 class="title">Contactanos</h2>
			    <p>Plaza Juárez S/N, Col. Centro. Comalcalco, Tabasco </p>
			    <p>Código Postal: 86300</p>
			    <p>Teléfono: (933)114-00-00</p>
			    <p>Correo Electrónico: <a href="[email protected]">[email protected]</a></p>
		    </div>

		    <div class="col-md-4">
			    <img src="http://www.comalcalco.gob.mx/assets/img/logo2-default.png">
		    </div>
		</footer>
	    </div>
	</div>
</div>
    <script src="http://localhost/proyecto/btstrp/js/modernizr.js"></script>
    <script src="http://localhost/proyecto/btstrp/js/jquery.js"></script>
    <script src="http://localhost/proyecto/btstrp/js/bootstrap.min.js"></script>
</body>

</html>
    
answered by 14.09.2017 в 21:06
0

Add% display:block; and take it out of the container.

    
answered by 14.09.2017 в 20:32
Fix an item on the bottom in wordpress perform update if a Query generates an error in the stored procedure