Ancho DIV de "100%" desplaza el extremo derecho de la página

Tengo un diseño muy simple con 2 DIVIS: una barra izquierda de ancho fijo y un área derecha que debe ocupar el 100% del ancho restante. Ambos tienen una altura del 100%, y quiero que el artículo correcto tenga una barra de desplazamiento vertical si la altura es más alta que la altura de la ventana.Ancho DIV de "100%" desplaza el extremo derecho de la página

Mi código actual ocupa toda la ventana del navegador, pero el área derecha se desplaza fuera del área visible del navegador hacia la derecha, y nunca hay una barra de desplazamiento vertical visible.

HTML:

<body> 
    <form id="Form2" runat="server"> 
     <div class="page"> 
      <div class="clear hideSkiplink"> 
       Left side stuff goes here.... 
      </div> 
      <div class="main"> 
       Right size stuff goes here.... 
      </div> 
     </div> 
    </form> 
</body>

CSS:

div.hideSkiplink 
{ 
    padding:20px; 
    background-color:#990000; 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:249px; 
    height:100%; 
} 
div.main 
{ 
    padding: 10px; 
    margin: 0px; 
    background-color: #000000; 
    color: #ffffff; 
    position: fixed; 
    top: 0px; 
    left: 250px; 
    width: 100%; 
    height: 100%; 
}

Fuente

2011-06-06 pearcewg

Lo tengo funcionando principalmente, ¡gracias a tus comentarios! Todavía me gustaría tener acceso a un maestro zen de DIV para ponerme en marcha ... ¡a veces los comportamientos pueden ser extraños! – pearcewg

Cuando das algo width:100% que significa 'lo que el ancho de mi contenedor, que tendrán la misma anchura' - que no significa 'Tomaré el 100% del espacio disponible'

En otras palabras, digamos que tu DIV padre tenía 300 píxeles de ancho, si le das al niño div width: 100% , será 100% de 300 píxeles.

Lo que puedes hacer aquí, dado que tu columna izquierda es de ancho fijo, es agregar un margen izquierdo a la div derecha.

div.left 
{ 
    width: 249px; 
} 

div.right 
{ 
    width: 100%; 
    margin-left: 249px; 
}

Fuente

2011-06-06 20:03:34 KOGI

También vale la pena señalar que el ancho significa el ancho del contenido. Comienza con eso y luego agrega el relleno, el borde y el margen. Así que incluso si tiene un solo div con el 100% en una página, se desplazará fuera de la pantalla si hay relleno. – gtd

@gtd es 100% correcto. Sin embargo, puede solucionarlo utilizando la regla 'box-sizing: border-box;' de CSS. Sin embargo, [la asistencia no está completa, aún] (http://caniuse.com/#search=box-sizing) – KOGI

En lugar de tener el área más amplia llenar el espacio, ¿por qué no hacer que la barra izquierda con posición absoluta y el contenido principal de la <div> llenan toda la página, con un padding-left a cambiar con el contenido?

Fuente

2011-06-06 20:05:17 Blender

Un div con un ancho del 100% llenará el contenedor en el que se encuentra. Su contenedor tiene un ancho del 100% de la página. No toma en cuenta el hecho de que lo movió 250px hacia la derecha con un posicionamiento absoluto.

su mejor apuesta:

.hideskiplink debe venir después de .main en el flujo. Flote .hideskiplink a la izquierda, asígnele un ancho y luego proporcione .main un margin-left que coincida con el ancho de .hideskiplink.

Fuente

2011-06-06 20:07:28

Algunas veces se necesitan para establecer el margen en el cuerpo en el CSS a 0.

EG.

body {background-color:#000; margin-left:0px;}

Causa por defecto algunos navegadores tienen un par de píxeles de relleno en el lado izquierdo.

Fuente

2012-10-11 05:49:08 user1427806

He solucionado el problema al establecer el min-ancho para el 'cuerpo' con el mismo valor que el ancho de mi contenido dentro de ese div.

Fuente

2015-01-20 21:21:45 Jerome

Ancho DIV de "100%" desplaza el extremo derecho de la página

Respuesta

Cuestiones relacionadas