0

Tengo creado un footer y lo he logrado posicionar al fondo de la página y que cuando haga scroll siga allí,pero cuando escribo un div, class o id se despega del final de la página.

Lo que quiero es que se quede allí. ¿Cómo lo hago?

Éste es mi código HTML y CSS:

html,
body {
  background-color: #FfFFFF;
  color: black;
  margin: 0px;
  padding: 0px;
  height: 100%;
}

#contenidoprincipal {
  min-height: 100%;
  position: relative;
}

header {
  background-color: blue;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 120px;
}

header h1 {
  color: Blue;
  margin: 0px;
  padding: 20px;
  color: white;
  font-family: sans serif, Arial;
  font-size: 36px;
  text-align: center;
}

.h2-section {
  text-align: center;
}

nav {
  font-family: Franklin Gothic Heavy, Arial;
  font-size: 22px;
  padding: 6px;
}

h2 {
  font-family: arial black, agency fb, calibri, Arial;
}

article {
  font-family: Arial, agency fb, calibri;
  font-size: 10px;
}

#barra_lateral {
  background-color: #8CEE51;
  margin: 1%;
  width: 20%;
  height: 200px;
  float: left;
  position: relative;
}

#nav_lateral {
  width: 80px;
  margin: auto;
  text-align: center;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  position: absolute;
  height: 10px;
  line-height: 10px;
  font-family: tahoma;
  font-size: 12px;
}

.contenidodeinteres {
  background-color: #80FF00;
  float: right;
  width: 74%;
  height: auto;
  padding: 1%;
  margin-left: 0.5%;
  margin-right: 1%;
  margin-top: 1%;
  margin-bottom: 1%
}

footer {
  font-size: 15px;
  color: white;
  background-color: #373153;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 0;
}
<!DOCTYPE HTML>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title>1ra Pagina Web</title>
  <link href="Css-NetPage.css" rel="stylesheet" />
</head>

<body>

  <div id="contenidoprincipal">

    <header>
      <h1>Titulo Principal </h1>
      <nav>Barra de Navegacion</nav>
    </header>

    <aside i-d="barra_lateral">
      <nav id="nav_lateral">Barra Lateral</nav>
    </aside>


    <section cl-ass=contenidodeinteres>
      <h2 cl-ass=h2-section>Pagina Web</h2>

      <article i-d="art.1">
        <h4>Definicion:</h4>

        <p>Una <strong>página web</strong>, o página electrónica, página digital, o ciberpágina es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes, y muchas otras cosas, adaptada para la llamada
          <strong>World Wide Web (WWW)</strong> y que puede ser accedida mediante un navegador web.<br> Esta información se encuentra generalmente en formato <strong>HTML o XHTML</strong>, y puede proporcionar acceso a otras páginas web mediante enlaces
          de hipertexto.</p>

        <p>Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.</p>
      </article>

      <article i-d="art.2">

        <h4>Caracteristicas</h4>

        <p>Una página web está compuesta principalmente por información de un tema factible (sólo texto y/o módulos multimedia) así como por hiperenlaces; además puede contener o asociar hoja de estilo, datos de estilo para especificar cómo debe visualizarse,
          y también aplicaciones embebidas para así permitir interacción.</p>

        <p>Las páginas web son escritas en un lenguaje de marcado que provee la capacidad de manejar e insertar hiperenlaces, generalmente HTML.</p>

        <p>Respecto a la estructura de las páginas web, algunos organismos, en especial el World Wide Web Consortium (W3C), suelen establecer directivas con la intención de normalizar el diseño, y para así facilitar y simplificar la visualización e interpretación
          del contenido.</p>

        <p>Una página web es en esencia una tarjeta de presentación digital, ya sea para empresas, organizaciones, o personas, así como una manera de comunicar ideas, pensamientos, conocimientos, informaciones o teorías. Así mismo, la nueva tendencia orienta
          a que las páginas web no sean sólo atractivas para los internautas, sino también optimizadas (preparadas), para los buscadores a través del código fuente. Forzar esta doble función puede, sin embargo, crear conflictos respecto de la calidad
          del contenido.</p>
      </article>
    </section>

    <footer>
      Contacto
    </footer>

  </div>
</body>

</html>

4
  • Puedes probar colocando el footer fuera del div?
    – Angel
    Commented el 20 ene. 2018 a las 2:26
  • queda peor, el footer queda como si estuviera fijo y se mueve el contenido por debajo de el Commented el 20 ene. 2018 a las 2:36
  • ¿A qué te refieres con "cuando escribo un div, class o id se despega del final de la página"? ¿cómo escribes un div, class o id? ¿Podrías poner un ejemplo de cómo se añaden/modifican elementos y crean el problema?
    – Alvaro Montoro
    Commented el 20 ene. 2018 a las 4:19
  • Alvaro, para fijar el footer en el final de la pagina, junte las etiquetas "body y html" en el css y les di "height:100%", y e creado un contenedor(div) que abarque todo el contenido que esta dentro del body,y le puse "position:relative" y "min-height:100%", luego puse el footer en "position:absolute" y "bottom:0",con esto el footer queda abajo.pero cuando introduzco un div,class,id dentro del div que abarca todo el body se despega el footer del final, inhabilite todos los div,id o class que había puesto dentro del que abarca todo el body con un guion y volvió a quedar abajo ¿que debo hacer? Commented el 20 ene. 2018 a las 14:46

3 respuestas 3

1

Si entendí bien tu planteamiento, esto te podría ayudar:

html, body {
  color: #000;
  margin: 0px;
  padding: 0px;
}

header {
  background: #eee;
  color: #555;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 120px;
  border-bottom: 1px solid #ddd;
}

header h1 {
  color: #555;
  margin: 0px;
  padding: 20px;
  font-size: 24px;
  font-weight: normal;
  position: absolute;
}

nav {
  width: 100%;
  text-align: center;
  font-size: 14px;
  padding: 6px 0;
  margin-top: 80px;
  display: inline-block;
  float: right
}

#contenidoprincipal {
  margin: 0px;
  padding: 0px;
}
.contenidodeinteres {
  float: right;
  width: 100%;
  height: auto;
  padding: 15px;
  margin-bottom: 25px;
  box-sizing: border-box;
}

.h2-section {
  font-weight: normal;
  margin-top: 5px;
}

article {
  font-size: 12px;
}

footer {
  font-size: 15px;
  color: #555;
  background: #eee;
  text-align: center;
  position: fixed;
  padding: 3px 0 5px;
  display: block;
  width: 100%;
  bottom: 0;
  border-top: 1px solid #ddd;
}
<header>
    <h1>LOGO</h1>
    <nav>Barra de Navegacion</nav>
</header>
  
<section id="contenidoprincipal">

  <div class=contenidodeinteres>
    <h2 class=h2-section>Pagina Web</h2>

    <article id="art-1">
      <h4>Definicion:</h4>

      <p>Una <strong>página web</strong>, o página electrónica, página digital, o ciberpágina es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes, y muchas otras cosas, adaptada para la llamada <strong>World Wide Web (WWW)</strong>        y que puede ser accedida mediante un navegador web.<br> Esta información se encuentra generalmente en formato <strong>HTML o XHTML</strong>, y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto.</p>

      <p>Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.</p>
    </article>

    <article id="art-2">

      <h4>Caracteristicas</h4>

      <p>Una página web está compuesta principalmente por información de un tema factible (sólo texto y/o módulos multimedia) así como por hiperenlaces; además puede contener o asociar hoja de estilo, datos de estilo para especificar cómo debe visualizarse,
        y también aplicaciones embebidas para así permitir interacción.</p>

      <p>Las páginas web son escritas en un lenguaje de marcado que provee la capacidad de manejar e insertar hiperenlaces, generalmente HTML.</p>

      <p>Respecto a la estructura de las páginas web, algunos organismos, en especial el World Wide Web Consortium (W3C), suelen establecer directivas con la intención de normalizar el diseño, y para así facilitar y simplificar la visualización e interpretación
        del contenido.</p>

      <p>Una página web es en esencia una tarjeta de presentación digital, ya sea para empresas, organizaciones, o personas, así como una manera de comunicar ideas, pensamientos, conocimientos, informaciones o teorías. Así mismo, la nueva tendencia orienta
        a que las páginas web no sean sólo atractivas para los internautas, sino también optimizadas (preparadas), para los buscadores a través del código fuente. Forzar esta doble función puede, sin embargo, crear conflictos respecto de la calidad del
        contenido.
      </p>
    </article>
  </div>

</section>

<footer>
  Contacto
</footer>

Considero que la estructura de tu html se puede optimizar (sugerencia inherente en el código adjunto). Entonces, ahora tienes 3 bloques principales por separado:

  1. Encabezado (<header>)
  2. Sección de contenido (<section>)
  3. Pié de página (<footer>)

Ahora sólo dale a tu <footer> las propiedades de un elemento fijo (position: fixed;).

Kacospro tiene razón, hay muchos errores en tu código original, por eso he usado el código que el te ha propuesto para hacer mi aporte.

Ojalá sea lo que buscas y te sirva. Saludos.

0

Tienes errores en tu código, por ejemplo en lugar de i-d debería ir id y en lugar de cl-ass debe ir class.

Para que tu footer se quede siempre en el fondo intenta sacarlo del div y asignale a html las propiedades position:relative y min-height: 100% el código quedaría mas o menos así

html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: #FfFFFF;
  color: black;
  margin: 0px;
  padding: 0px;
}

#contenidoprincipal {
  min-height: 100%;
  position: relative;
}

header {
  background-color: blue;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 120px;
}

header h1 {
  color: Blue;
  margin: 0px;
  padding: 20px;
  color: white;
  font-family: sans serif, Arial;
  font-size: 36px;
  text-align: center;
}

.h2-section {
  text-align: center;
}

nav {
  font-family: Franklin Gothic Heavy, Arial;
  font-size: 22px;
  padding: 6px;
}

h2 {
  font-family: arial black, agency fb, calibri, Arial;
}

article {
  font-family: Arial, agency fb, calibri;
  font-size: 10px;
}

#barra_lateral {
  background-color: #8CEE51;
  margin: 1%;
  width: 20%;
  height: 200px;
  float: left;
  position: relative;
}

#nav_lateral {
  width: 80px;
  margin: auto;
  text-align: center;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  position: absolute;
  height: 10px;
  line-height: 10px;
  font-family: tahoma;
  font-size: 12px;
}

.contenidodeinteres {
  background-color: #80FF00;
  float: right;
  width: 74%;
  height: auto;
  padding: 1%;
  margin-left: 0.5%;
  margin-right: 1%;
  margin-top: 1%;
  margin-bottom: 1%
}

footer {
  font-size: 15px;
  color: white;
  background-color: #373153;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 0;
}
<div id="contenidoprincipal">

  <header>
    <h1>Titulo Principal </h1>
    <nav>Barra de Navegacion</nav>
  </header>

  <aside id="barra_lateral">
    <nav id="nav_lateral">Barra Lateral</nav>
  </aside>


  <section class=contenidodeinteres>
    <h2 class=h2-section>Pagina Web</h2>

    <article id="art.1">
      <h4>Definicion:</h4>

      <p>Una <strong>página web</strong>, o página electrónica, página digital, o ciberpágina es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes, y muchas otras cosas, adaptada para la llamada <strong>World Wide Web (WWW)</strong>        y que puede ser accedida mediante un navegador web.<br> Esta información se encuentra generalmente en formato <strong>HTML o XHTML</strong>, y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto.</p>

      <p>Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.</p>
    </article>

    <article id="art.2">

      <h4>Caracteristicas</h4>

      <p>Una página web está compuesta principalmente por información de un tema factible (sólo texto y/o módulos multimedia) así como por hiperenlaces; además puede contener o asociar hoja de estilo, datos de estilo para especificar cómo debe visualizarse,
        y también aplicaciones embebidas para así permitir interacción.</p>

      <p>Las páginas web son escritas en un lenguaje de marcado que provee la capacidad de manejar e insertar hiperenlaces, generalmente HTML.</p>

      <p>Respecto a la estructura de las páginas web, algunos organismos, en especial el World Wide Web Consortium (W3C), suelen establecer directivas con la intención de normalizar el diseño, y para así facilitar y simplificar la visualización e interpretación
        del contenido.</p>

      <p>Una página web es en esencia una tarjeta de presentación digital, ya sea para empresas, organizaciones, o personas, así como una manera de comunicar ideas, pensamientos, conocimientos, informaciones o teorías. Así mismo, la nueva tendencia orienta
        a que las páginas web no sean sólo atractivas para los internautas, sino también optimizadas (preparadas), para los buscadores a través del código fuente. Forzar esta doble función puede, sin embargo, crear conflictos respecto de la calidad del
        contenido.
      </p>
    </article>
  </section>

</div>
<footer>
  Contacto
</footer>

Una explicación de lo que está pasando, como dice la documentación

Para los elementos con position absolute , las propiedades top, right, bottom, y left especifican la separación desde los bordes del elemento bloque contenedor (aquel al que el elemento es relativamente posicionado). El margen del elemento es contado a partir de ese desplazamiento.

Por lo que tu footer estaba posicionado con respecto al #contenidoprincipal y por eso cuando agregas mas contenido a la página el footer se movía con el resto de la página, ya que #contenidoprincipal tiene el alto de la ventana y no de todo el contenido del html.

0
0

solo tienes que poner un

overflow: hidden;

dentro del footer del css y listo

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.