2011-01-06 19 views
5

Hola, he estado trabajando en un sitio web desde hace bastante tiempo, mejorando el código, etc. Me acabo de dar cuenta de que, en pantallas más pequeñas, la altura del fondo blanco no se extiende a todos los contenido.Div completa altura no se extiende

El ajuste min-height: 100%; y height: 100%; parece que no lo resuelve, ¿cree que esto podría deberse al hecho de que gran parte del contenido está flotando?

Cualquier sugerencia sería muy apreciada.

Respuesta

5

En su div.container, elimine height: 100% y agregue overflow: auto.

+0

Eso casi lo hizo, después de agregar 'min-height: 100%;' a tu sugerencia, ¡funcionó! ¿Alguna sugerencia para obtener 'min-height: 100%;' trabajando en IE <7? – Olical

+0

@ Wolfy87: 'min-height' no funciona en IE <7. IE <7 trata 'height' en el modo 'min-height' se supone que funciona, por lo que para esos navegadores debería poder usar 'height'. Sin embargo, necesitarás hacer algunas detecciones y/o piratas informáticos para que pueda usar "min-height" o "height" dependiendo del navegador. Dado que IE6 ahora tiene menos del 3% de cuota de mercado, puede que no valga la pena el esfuerzo. – Spudley

+0

@ Wolfy87: No consideré IE6 cuando estaba respondiendo. Si intenta hacer que el sitio funcione en IE6, es posible que desee comprobar [esta página] (http://www.astute.co.uk/buy-electronic-components.htm), no parece correcto. ¿Estás seguro de que necesitas 'min-height: 100%'? El sitio me parece bien. – thirtydot

0

Intentando desbordamiento: oculto; en el contenedor que desea borrar debajo del resto del contenido

+0

Pero 'overflow: hidden;' va a hacer lo que se dice en la lata, ocultar el contenido desbordante. Necesito que sea empujado hacia abajo por este contenido, estaba pensando más en la línea de una solución clara, pero tampoco he logrado hacerlo funcionar todavía. – Olical

+0

desbordamiento: oculto también se puede utilizar para borrar contenido, trabajando de manera similar a .container: after {clear: both} http://www.quirksmode.org/css/clearing.html – kieran

+0

Ya veo, gracias por eso, a pesar de que está funcionando ahora es realmente útil. – Olical

1

Quite "height: 100%" del contenedor, "float: left" del pie de página y agregue "clear: both" al pie de página. Esto borrará todos los flotadores en el contenedor y el color de fondo del contenedor estará visible en toda la página, independientemente del tamaño del navegador.

0

Usted puede utilizar inline-block a div principal, como: -

div.container{ 
    display:inline-block; 
} 
Cuestiones relacionadas