div con posición absoluta a la derecha haciendo que la barra de desplazamiento cuando la izquierda no

Estoy intentando "flanquear" un div centrado con algunos elementos de diseño que tengan una posición absoluta más allá del ancho de la div principal. Obtendré una barra de desplazamiento debido al elemento de la derecha, pero no al elemento de la izquierda (IE6/7/8, Chrome, Firefox). ¿Cómo puedo deshacerme de esa barra de desplazamiento horizontal?div con posición absoluta a la derecha haciendo que la barra de desplazamiento cuando la izquierda no

<html> 
<head> 
<style type="text/css"> 
    html, body { 
     height: 100%; 
     width: 100%; 
     margin: 0; 
    } 

    body { text-align: center; } 

    .wrapper { 
     margin: 0 auto; 
     position: relative; 
     width: 960px; 
     z-index: 0; 
    } 

    .main { 
     background: #900; 
     height: 700px; 
    } 

    .right, .left { 
     position: absolute; 
     height: 100px; 
     width: 100px; 
    } 

    .right { 
     background: #090; 
     top: 0px; 
     left: 960px; 
     z-index: 1; 
    } 

    .left { 
     background: #009; 
     top: 0px; 
     left: -100px; 
     z-index: 1; 
    }   
</style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="main"></div> 
     <div class="left"></div> 
     <div class="right"></div> 
    </div> 
</body> 
</html>

Fuente

2010-02-17 Michael Snyder

No veo barras de desplazamiento en Chrome y Firefox en la Mac. ¿Qué tipo de documento estás usando? –

Estoy usando este (abajo), y soy una PC ... no compré esto en ninguna versión para Mac de los navegadores. –

Su cuerpo no está configurado como relativo.

Fuente

2010-02-18 04:56:50

No .. Todavía tengo el problema. –

Sin saber qué desea hacer con esto, yo tal vez establecer una imagen de fondo en el cuerpo en su lugar.

Fuente

2010-03-01 09:58:47 mistalaba

Apreciado, y podría tener que ir por esa ruta; Solo he estado tratando de evitarlo. –

Si no muestra nada con lo que se interactúe, no hay nada * incorrecto * en seguir esa ruta. –

La imagen de fondo (centrada) es la mejor opción, suponiendo que no tenga contenido a la izquierda y a la derecha (ya que no se sabe si se ocultará). La imagen de fondo solo contendrá los colores/imágenes de la izquierda y la derecha y será más larga que el ancho del monitor específico. – bcm

que está obteniendo una barra de desplazamiento sólo cuando la ventana gráfica más delgada que la principal ventaja que cuadro de la derecha, ¿verdad? (No crea que eso estaba claro para algunas personas). Se espera que el comportamiento del navegador para el desbordamiento de contenido.

Dependiendo de lo que desea que suceda (? ¿Por qué quiere que desaparezca en esta circunstancia, si lo hace), podría configurar overflow: hidden en .wrapper. Eso siempre lo escondería: si buscas visualizarlo dinámicamente en algún otro evento, eso funcionará.

Si no estoy equivocado, sin embargo, simplemente no desea que se muestre cuando su ventana sólo 960 de ancho. AFAIR no puedes hacer eso sin js/jQuery. Mi sugerencia sería, en realidad, especialmente si no quiere meterse con javascript, si desea que este contenido sea visible, acepte la barra de desplazamiento en anchos estrechos. Puede irritarlo como diseñador, pero la mayoría de las personas no lo notarán, y aquellos que lo hacen aún pueden acceder a su contenido, lo cual es una ganancia, ¿verdad?

Fuente

2010-03-01 10:19:06

¿Está diciendo que el comportamiento esperado para el desbordamiento de contenido solo provoca que una barra de desplazamiento desborde contenido en el lado derecho? Porque eso es lo que está pasando aquí. El problema es que la barra de desplazamiento solo está causada por el cuadro de la derecha; la caja de la izquierda DEBERÍA causar el mismo problema, pero no es así.Por lo tanto, se deduce que la izquierda se trata de manera diferente a la derecha, o que hay una forma de que el lado derecho no afecte al ancho horizontal. Desafortunadamente, los poderes que se consideran la barra de desplazamiento como un defecto (como hago yo). Ojalá pudiera ignorarlo. –

No sé qué tiene que decir la especificación al respecto, pero por experiencia, los desbordamientos superiores e izquierdos se tratan de manera diferente. Es por eso que podemos ocultar los elementos no deseados con left -99999em y top: -999em y tal. Si quieres resolver esto, te sugiero usar algunos javascript. –

(O usando una imagen de fondo) –

tengo una solución que no funciona en IE7/IE6, pero parece estar bien en todas partes.

Crear un contenedor (#bodyInner) alrededor de todo dentro de su < etiqueta.

Aplicar esta regla CSS:

#bodyInner { 
    width:100%; 
    overflow:hidden; 
    min-width:960px; 
    }

lamentablemente no se puede simplemente aplicar esta sobre el elemento <body>.

Fuente

2010-04-16 02:30:48 James

Lanzar un overflow-x: oculto en la etiqueta del cuerpo funcionaría en cualquier cosa que no sea IE6/7 ... pero para esos dos navegadores, también necesitará agregar overflow-x: hidden a la etiqueta html.

Así que usar lo que tienes ahora con este ajuste:

html, body { 
     height: 100%; 
     width: 100%; 
     margin: 0; 
     *overflow-x: hidden; 
    } 

body { text-align: center; overflow-x: hidden; }

Tenga en cuenta que la razón por la que "*" truco se utiliza en el html, declaración de organismo se debe a que IE8 es poco convencional. Si no lo usa, IE8 también perderá barras de desplazamiento verticales, no solo horizontales. No sé por qué. Pero esa solución debería estar bien.

Fuente

2010-04-16 03:53:09 RussellUresti

Solo para tu información, confiar en los errores del navegador es generalmente una mala idea. IE admite la detección de navegador que no generará falsos positivos o romperá si termina parcheado. Si bien es físicamente doloroso hacer esto para líneas de CSS únicas, aún así, eche un vistazo a http://www.quirksmode.org/css/condcom.html – pinkgothic

Lo sé, esto fue solo por taquigrafía. Siempre uso un archivo IE.css cargado a través del comentario condicional de IE. – RussellUresti

Envuelva todos los elementos en un div, haga que la posición div sea relativa y el desbordamiento oculto. Resuelve este problema todo el tiempo. : D

Fuente

2010-06-23 21:10:13

Esto funciona en IE6-9, FF3.6, Safari 5 y Chrome 5. No parecía importar qué doctype le arrojé (ninguno, xhtml 1 de transición, html5). Espero que esto ayude, ese fue un problema interesante.

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html, 
body { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

body { 
    overflow: auto; 
} 
#container { 
    min-width: 960px; 
    zoom: 1; /*For ie6*/ 
    position: relative; /*For ie6/7*/ 
    overflow: hidden; 
    margin: 0 auto; 
} 

#main { 
    background: #cea; 
    width: 960px; 
    margin: 0 auto; 
    height: 700px; 
    position: relative; 
    top: 0; 
} 

#right, 
#left { 
    position: absolute; 
    height: 100px; 
    width: 100px; 
    top: 0; 
    z-index: 100; 
} 

#right { 
    background: #797; 
    right: -100px; 
} 

#left { 
    background: #590; 
    left: -100px; 
}  
</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="main"> 
      <div id="left">left</div> 
      <div id="right">right</div> 
     </div> 
    </div> 
</body> 
</html>

Fuente

2010-07-18 00:53:25 joelpittet

posición: se requiere un relativo para el contenedor en Chrome/Mozilla/Opera también, no entiendo muy bien por qué aunque – Dan

Si el idioma de la página es de izquierda a derecha, los elementos que no se ajustan a la izquierda no causan una barra de desplazamiento.

Prueba esto:

<html dir="rtl">...</html>

Esto va a cambiar la dirección del texto de la página a la derecha a izquierda, y ahora el div izquierda hará que una barra de desplazamiento, no la correcta.

Puede hacer lo mismo con la dirección: propiedad rtl css.

Si desea que el procesamiento de su página sea independiente de la dirección del texto, puede organizar los elementos de la página de manera diferente para evitar esto.

Fuente

2010-07-19 22:28:35

no se dio cuenta de eso - hecho genial! – atwixtor

Vieja pregunta que sé, pero puede ayudar a alguien más. A continuación, se amplía la respuesta de James pero funciona en IE6/7/8/9, FF y Webkit. Sí, usa expresiones malvadas, pero puedes poner eso en una hoja de estilo específica de IE6.

#bodyInner { 
     width: 100%; 
     min-width: 960px; 
     overflow: hidden;  
     width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) > 980 ? "100%" : (((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) #LT# 980 ? "960px" : "97.5%")); 
}

Fuente

2010-10-26 05:15:48

necesitaba una solución de este tipo también - gracias a todos los que sugirió la envoltura de ancho 100% con overlow-x oculto. Sin embargo, no creo que tengas que agregar el div adicional #bodyInner. Lo he probado exitosamente aplicando los atributos de ancho y desbordamiento directamente al cuerpo en Safari, Opera, Firefox, Chrome e IE8.

Fuente

2010-11-10 19:02:08 Mark

Estaba teniendo un problema similar a esto y me estaba arrancando completamente los pelos, ya que la solución anterior no me funcionaba del todo. Sobrepongo esto creando un div fuera de mi div contenedor principal y usando min-width y max-width para encontrar una solución.

#boxescontainer { 
    position: relative; 
    max-width: 1100px; 
    min-width: 980px; 
} 

    #boxes {  
     max-width: 1100px; 
     min-width: 900px; 
     height: 142px; 
     background:url(../grfx/square.png) no-repeat; 
     background-position: center; 
     z-index: 100; 
    }

Sin embargo, encontramos que también se necesitaba para hacer la imagen square.png el tamaño de la div así que hice como un png transparente a 1100px. Esta fue mi solución al problema y espero que pueda ayudar a alguien más.

En una nota lateral también tenía una imagen en el lado izquierdo en la que usé la posición absoluta que no tenía el mismo problema de la barra de desplazamiento que el derecho. Aparentemente, el lado derecho y el izquierdo toman diferentes propiedades de las investigaciones que hice con respecto a este asunto.

En lo que respecta a las personas que usan overflow-x: hidden, tendría que estar en desacuerdo con este método principalmente porque se está quitando la capacidad de desplazamiento horizontal del usuario. Si su sitio web está diseñado para verse con una resolución de 1024 píxeles, las personas con una resolución de 800 píxeles no podrán ver la mitad de su sitio si quita la capacidad de desplazarse horizontalmente.

Fuente

2011-03-17 01:51:00 Sarah

div con posición absoluta a la derecha haciendo que la barra de desplazamiento cuando la izquierda no

Respuesta

Cuestiones relacionadas