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
    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 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
    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? 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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