CSS 100% de ancho en el tamaño del navegador

Hola, estoy intentando crear un diseño con CSS y me estoy enfrentando a un problema extraño. Bien extraño para mi Tengo 3 divs a Encabezado, Pie de página y Área de contenido principal. El encabezado y el pie de página deben permanecer en un ancho constante de 100%, mientras que el área de contenido principal se debe fijar centralmente en 996px; Sin embargo, todo está bien, cuando cambio el tamaño de la ventana del navegador a un ancho inferior a 996px y luego desplazo el contenido de la ventana a la derecha, el encabezado y el pie de página 100% parecen estar truncados y ya no son 100%. He pinchado un pequeño script básico para ilustrar el problema (estilos en línea para mantenerlo compacto). Sé que puedo agregar desbordamiento: oculto a cada uno de los contenedores para desactivar las barras de desplazamiento cuando se cambia el tamaño de la ventana. También escribí una pequeña parte de jQuery para forzar la div a el ancho, si el ancho cae por debajo de un cierto ancho. Sin embargo, mi pregunta es sobre el CSS, ¿hay una mejor solución de CSS puro para este problema? ¿O alguien puede explicar por qué sucede esto? ¡Gracias de antemano! DotsCCSS 100% de ancho en el tamaño del navegador

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>div width test</title> 
</head> 
<body style="border:none; margin:0; padding:0; height:100%; width:100%"> 

    <div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div> 

    <div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto"> 
     <div id="inner-content"> 
      CONTENT OF THE PAGE HERE 
     </div> 
    </div> 
    <div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div> 
</body>

Fuente

2010-09-27 DotsC

publique su código css y html. –

no estoy del todo claro en su problema, pero puede establecer min-width:996px; en la cabecera y el pie para mantenerlos al menos tan ancha como el contenido.

Fuente

2010-09-27 15:23:15 JamesMLV

Pruebe esto y utilice el doctype de HTML5.

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
     <style type="text/css"> 
      body{margin:0;text-align:center;} 
      .header,.content,.footer{text-align:left;clear:both;margin:0 auto;} 
      .header,.footer{width:100%;background-color:blue;height:128px;min-width:996px;} 
      .content{width:996px;height:512px;background-color:red;} 
     </style> 
     <title>Index</title> 
    </head> 
    <body> 
     <div class="header"> 
      Header stuff here 
     </div> 
     <div class="content"> 
      Page content stuff here 
     </div> 
     <div class="footer"> 
      and your footer... 
     </div> 
    </body> 
</html>

Fuente

2010-09-27 16:07:54

FYI - Esta solución funcionó para lo que estaba buscando en IE8/IE7. Agregando a .header y .footer {ancho: 100%; min-width: 970px}. Gracias +1 – Downpour046

CSS 100% de ancho en el tamaño del navegador

Respuesta

Cuestiones relacionadas