CSS Cuerpo principal no se extiende a la página?

StackOverflow https://stackoverflow.com/questions/3612890

  •  26-09-2019
  •  | 
  •  

Pregunta

Estoy batiendo la cabeza contra una pared tratando de averiguar por qué el código que he escrito para un sitio en particular no acaba de trabajo.

El cuerpo principal de mis páginas (el área blanca en el siguiente enlace) debe ser que se extiende desde la navegación a pie de página, pero sólo lo hace en ciertas páginas.

El pie de página se coloca automáticamente en la parte inferior de cada página independientemente de la altura (es decir, será a pie de página de una página 400 píxeles de altura).

¿Es posible sólo estoy perdiendo algo muy básico?

Me han publicado un enlace a la versión dev del sitio en:

www.contendertest.com

Las páginas que estoy teniendo problemas con el índice y son el enlace 'Registrarse'.

¿Fue útil?

Solución

Es porque no hay suficiente contenido para llenar todo el camino si usted tiene un área de visión. Si nos fijamos en un monitor con una ventana más grande, se puede ver que no es blanco todo el camino hasta el pie de página.

EDIT: añadir la línea padding-bottom: 100px a #bodyContainer y margin-top: -100px a #footer y funcionará.

Otros consejos

Dar una #wrapper Div A imagen de fondo que es el ancho y el color del área de contenido con repeat-y.

Editar: también centrar la imagen de fondo

Probar. Por supuesto que no con CSS en línea como la mía. 

<html>
<head>
    <title>DIV Test</title>
    <style>
        body {
            margin: 0;
        }

        #container {
            height: 100%;
            width: 100%;
        }

        #header {
            background: #0000FF;
            position: absolute;
            top: 0;
            height: 100px;
            width: 100%;
        }

        #content {
            background: #FF0000;
            height: auto;
            width: 100%;
        }

        #footer {
            background: #00FF00;
            position: absolute;
            bottom: 0;
            height: 100px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header"><!-- header content here --></div>
        <div id="content"><!-- main content here --></div>
        <div id="footer"><!-- footer content here --></div>
    </div>
</body>

Con suerte que le ayuda.

EDIT: Para señalar cuál es la solución. Mira los atributos de posición CSS encabezado y pie. Eso debería resolverlo.

style.css, línea 16, remove altura: 100%

ahora 

html, body {
  background-color:#EDEDE1;
  color:#666666;
  font:12px Helvetica,Arial,sans-serif;
  height:100%;
  margin:0;
  padding:0;
  text-align:justify;
}

después 

html, body {
  background-color:#EDEDE1;
  color:#666666;
  font:12px Helvetica,Arial,sans-serif;
  margin:0;
  padding:0;
  text-align:justify;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top