How to make the footer of my website stay fixed in the bottom part? [duplicate]

Navigation
0

Code HTML : 

<!DOCTYPE HTML>
<html lang="es">
  <head>
    <title>Primer página HTML5</title>
    <meta charset = "utf-8" />
    <meta name = "viewport" content="width=device-width">

    <link rel="icon" href="IMG/ico/Icono.ico">  
    <link rel="stylesheet" type="text/css" href="CSS/estilos.css">

    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color: #111;
        }

        .active {
            background-color: #BF6763;
        }
    </style>

    <style> 
        p.test {
            width: 11em; 
            border: 1px solid #000000;
            word-wrap: break-word;              
        }
    </style>

</head>
<body background="IMG/fondo/dos.png">

    <section class = "contenedor">
        <section class = "contenido_principal">
            <aside class = "sin_nada">
                <article>
                    <ul>
                        <li><a href="" class="active">Home</a></li>
                        <li><a href="">New items</a></li>
                        <li><a href="">My cart</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </article>
            </aside>
            <article class="contenido_PW2">
                <form id="searchbox" action="">
                    <input id="search" type="text" placeholder="Que quieres buscar">
                    <input id="submit" type="submit" value="buscar">
                </form>
            </article>          
            <center class="Oswald">
                <h2>Bienvenido a tu GameShop</h2>
                <h1>Aqui podras encontrar todo tipo de articulos</h1>
            </center>

            <center>
                <a href="">Celulares</a>
                <hr>

                <?php
                    for ($i=1; $i <= 6; $i++) { 
                        echo '<section>';
                        echo '</section>';
                    }
                ?>

            </center>

            <center>
                <a href="">Laptop</a>
                <hr>
            </center>

            <center>
                <a href="">Equipo de sonido</a>
                <hr>
            </center>

        </section>              
    </section>

    <footer class = "pie_pagina">
        <center>
            <a href="https://www.facebook.com/jeffrey.lionelwoods.52" target="_blank">
                <img alt="sigueme en facebook" height="40" src="http://3.bp.blogspot.com/-MQuocq7OzfU/UiXwUY81yQI/AAAAAAAAB0Q/h6-R_R2-buI/s1600/face.png" title="sigueme en facebook" width="40" />
            </a>

            <a href="https://plus.google.com/u/0/108730066220357188830" target="_blank">
                <img alt="sigueme en Google+" height="40" src="http://1.bp.blogspot.com/-LzgEeObkOc0/UiX1TupB_KI/AAAAAAAAB5I/Ox_ZllZY90g/s1600/Google%252B+alt.png" title="sigueme en Google+" width="40" />
            </a>

            <a href="https://twitter.com/Ramses_Sep" target="_blank">
                <img alt="sigueme en Twitter" height="40" src="http://2.bp.blogspot.com/-B0wCtNXYV3U/UiX1VnAQSrI/AAAAAAAAB6Q/ILY3m0NJVE8/s1600/Twitter+NEW.png" title="sigueme en Twitter" width="40" />
            </a>

        </center>
    </footer>
</body>

Code CSS3 : 

body{
    background-color: none;
    font-family: Verdana;
    margin: 0;
    padding: 0;
}
section{
    background-color: none;
    height: 100px;
    width: 50%;
    margin-bottom: 10px;
    padding: 10px;
}
.contenedor{
    width: 100%;
    height: 600px;
    background-color: none;
}
.contenido_principal{
    width: 100%;
    height: 560px;
    background-color: none;
    float: left;
    margin-top: -10px;
}
.pie_pagina{
    width: 100%;
    height: 300px;
    background-color: black;
    clear: both;

}
.sin_nada{
    margin-top: -20px;
    margin-left: -30px;
}
.Oswald{
    font-family: 'Oswald', sans-serif;
}
.letra{
    font-family: 'Raleway', sans-serif;
}
.buscador{
    margin-left: 50%;

}
.contenido_PW{
    margin-top: 50%;
    height: 50%;
    margin-left: 30em;
}

#searchbox
{
    background-color: none;
    border-width: 1px;
    width: 500px;
    height: 35px;
    padding: 1px;
    margin: 0 auto 0;
    overflow: hidden;
    margin-left: 76%;
    margin-top: .6%;
    /* Clear floats / border-radius: 35px; / border-style: solid; / border-color: #c4d9df #a4c3ca #83afb7; / 
    #fff / #d4e8ec / background-image: linear-gradient(, ); / #eaf8fc */
}
#search, 
#submit {
    float: left;
}

#search {
    padding: 5px 9px;
    height: 15px;
    width: 200px;
    border: 1px solid #a4c3ca;
    font: normal 11px 'trebuchet MS', arial, helvetica;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 10 10px 30px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
}
#submit
{       
    background-image: linear-gradient(#95d788, #6cbb6b);
    border-radius: 3px 3px 3px 3px;
    border-width: 3px;
    border-style: solid;
    border-color: #7eba7c #578e57 #447d43;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    height: 27px;
    margin: 0 0 0 4px;
    width: 70px;
    cursor: pointer;
    font: bold 14px Arial, Helvetica;
    color: #23441e;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#submit:hover {       
    background-color: #95d788;
    background-image: linear-gradient(#6cbb6b, #95d788);
}   

#submit:active {       
    background: #95d788;
    outline: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;        
}

#submit::-moz-focus-inner {
       border: 0;
}
#search::-webkit-input-placeholder {
   color: #9c9c9c;
   font-style: italic;
}

#search:-moz-placeholder {
   color: #9c9c9c;
   font-style: italic;
}  

#search:-ms-placeholder {
   color: #9c9c9c;
   font-style: italic;
}
    
asked by Ricardo Ramss Seplveda Becerra 07.04.2018 в 01:13
source

3 answers

0

Try this css: 

.pie_pagina{
    width: 100%;
    height: 300px;
    background-color: black;
    clear: both;
    bottom: 0;
}
    
answered by 07.04.2018 в 01:33
0

I'll give you an example with flexblox and the explanation of the parts

EXPLANATION

  • flex-direction: column; / display elements vertically as columns /
  • min-height: 100vh; / 100 percent of the height of the viewport /
  • flex: 1; / leaves all flexible elements with the same length / 

    • <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
   body {
  display: flex;
  flex-direction: column;/*mostrar los elementos de manera vertical como columnas*/
  margin: 0;
  min-height: 100vh;/*100 por ciento de la altura del viewport*/
}
    #contenido{
      flex: 1;/*deja a todos los elementos flexibles con la misma longitud*/
      background-color: steelblue;
    }
    footer{
      background-color: crimson;
    }
  </style>
</head>
<body>
<div id="contenido">
</div>
  <footer>Hola Mundo</footer>
</body>
</html>
        
    answered by 07.04.2018 в 01:37
    0

    Use the following properties in your class .pie_pagina 

       .pie_pagina{
        width: 100%;
        height: 300px;
        background-color: black;
        clear: both;
        overflow: hidden;
        position: sticky;
        bottom: 0;
    }
        
    answered by 07.04.2018 в 21:33
    Configure Apache2.4-MapServer-Pmapper Change .jpeg to .pdf with php