El encabezado de 100% de ancho no llena el navegador

Cuando la ventana del navegador es lo suficientemente pequeña para forzar una barra de desplazamiento horizontal y se desplaza hacia la derecha, el color de fondo del encabezado termina antes del borde del navegador. Estoy usando una clase css.El encabezado de 100% de ancho no llena el navegador

.s_header { 
    margin: 0; 
    width: 100%; 
    display: block; 
    border-bottom: 1px solid #000; 
    background-color:#b8dbec; 
    height:133px; 
}

El contenido de <div class="s_header"> no son tan amplias como la tabla 4 la columna debajo de él, donde los totales de contenido Abot 840px con imagen anchuras + relleno y una columna de ancho fijo 140px. Entonces, cuando la ventana del navegador es inferior a 840px, hay una barra de desplazamiento horizontal que está bien, excepto que el fondo del encabezado se corta cuando se desplaza.

Los elementos principales de <div class="s_header"> son body y html para los que el ancho del 100% significa el ancho de la ventana. Intenté incluir el desbordamiento: visible en la clase .s_header sin éxito.

El ancho del cuerpo también se establece en el 100% de margen de 0

¿Hay una manera simple que puedo conseguir el fondo de extender a la derecha cuando aparece una barra de desplazamiento?

El problema es la página en here

Cualquier sugerencia será apreciado considerablemente.

Fuente

2009-07-22 Anonymous

todo corazón sugieren que utilice Firefox e instalar Firebug: http://getfirebug.com/

Tiene esta característica fresco que le permite inspeccionar un elemento DOM, y le dirá que todos los estilos, y lo que se originan a partir de estilos. Así que si el cuerpo está heredando un poco de relleno errante (o algo así), usted será capaz de ver visualmente lo que está pasando :-)

Fuente

2009-07-22 17:51:14

Esto no proporciona una respuesta a la pregunta. Para criticar o solicitar aclaraciones de un autor, deje un comentario debajo de su publicación. – kolossus

Gracias por sus comentarios sobre una respuesta de casi 6 años ... antes de que la crítica/aclaración fuera una práctica comunitaria bien establecida;) –

De nada; Como usuario de confianza, confío en que comprenda cómo surgió eso. La cola de revisión lo sirve y lo resolvemos – kolossus

establezca los márgenes de la etiqueta del cuerpo

El modo en línea

<body style="margin: 0px 0px 0px 0px;">

En su style.css (o lo que sea)

body { 
    margin: 0px 0px 0px 0px; 
}

Fuente

2009-07-22 17:52:35

+1 modo corto y relleno: cuerpo {margen: 0; relleno: 0} – gmunkhbaatarmn

Tengo cuerpo {margen: 0; relleno: 0} pero no ayudó. El encabezado es mucho más pequeño que el contenido ... – DashaLuna

manera más fácil es crear un div interior y configurarlo para que la misma anchura que la página va justo antes de que aparezca la barra de desplazamiento ejemplo

<div class="s_header"> <div class="inner"> 

</div> </div> 

.inner{ 
    width:990px; 
    background:#f00; 
    margin:0 auto; 
}

Fuente

2009-07-23 10:50:26

Casi nunca es una buena idea establecer el ancho de un div en un número codificado. –

Parece que el problema se debe a las tres imágenes en la tabla del cuerpo. Cuando reduce el ancho del navegador, hace que las tres imágenes se agrupen, quedando en celdas individuales de la tabla que no pueden envolverse, lo que da como resultado un ancho fijo.

Puede intentar disimular la solución utilizando una imagen de fondo que se repite para el encabezado, pero volvería a escribir la estructura de la tabla con un enfoque flotante.

Fuente

2009-07-23 10:59:34

Mi [muy simple] solución [y probablemente feo]:

establecer su etiqueta de cuerpo min-width propiedad a 100%;
definir una clase MinWidth definir un 100% propiedad de ancho y una min-width propiedad basado en el siguiente cálculo:
- haber ajustado su tamaño de fuente a 100%, verificar su traducción en píxeles en un navegador;
- divide la resolución 1440px anchura hoy en día 17" monitores estándar con este resultado font-size pixeles 1 em;
- establecer la propiedad-min anchura expresado en em a este resultado;
- por ejemplo, para la fuente-family: ' Gill Sans MT', sans-serif; 100% resultados del tamaño de una fuente 16px;
  1440/16 = 90
  el CSS debe tener el siguiente aspecto:
  html {whatever} body {min-width: 100%;} .minwidth {min-width:90em;width:100%;}

Finalmente 3. aplique la clase .minwidth a todos los niños de la tercera edad del cuerpo que tengan que ser del 100% del tamaño del cuerpo.

Rezise la ventana de su navegador y/o cambiar la resolución, que debería haber deshacerse de este molesto problema para todas las resoluciones de pantalla de hasta 1440 * 900

esperanza que podía ayudar

Fuente

2012-03-28 16:14:32

El encabezado de 100% de ancho no llena el navegador

Respuesta

Cuestiones relacionadas