0
119
VistasHTML moviéndose al azar después de actualizar la página
Mi HTML a veces se mueve hacia un lado poco a poco cuando recargo una página (simplemente presionando F5), sin ningún cambio en los formularios, JS, CSS, etc. hasta que llega al lado izquierdo de la pantalla. La última captura de pantalla muestra que el elemento HTML (lo mismo para el div #content) ni siquiera cubre el espacio 'vacío' (es decir, no hay margen, relleno o lo que sea) y es simplemente aleatorio (estoy usando Chrome), El 95% de las veces la página funciona bien, pero de repente, comienza a moverse hacia un lado al azar después de cada recarga.
Utiliza Bootstrap 2.3.2 como marco base. La página tiene un montón de JS y CSS, así que avíseme si necesita algún código más específico, pero es un comportamiento que nunca antes había visto y no tengo idea de qué lo está causando. Si alguien puede arrojar algo de luz sobre el tema se lo agradecería.
Estructura básica de la página:
#header { height: 77px; position: fixed; width: 100%; z-index: -9; top: 0; background-color: #333333; background-image: none; box-shadow: none; border-bottom: 0; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } #user-header-actions { position: relative; z-index: 10; width: 100%; margin-left: 215px; height: 40px; background-color: #333333; } #sidebar { top: 77px; position: fixed; height: 100%; overflow-y: auto; display: block; float: left; width: 220px; z-index: 16; } #content { margin-top: 38px; background: none repeat scroll 0 0 #eeeeee; margin-left: 220px; margin-right: 0; padding-bottom: 25px; position: relative; min-height: 500px; width: auto; border-top-left-radius: 8px; } <html lang="en> <head>...</head> <body> <div id="header" class="hidden-print">Header</div> <div id="user-header-actions" class="hidden-print">Top bar</div> <div id="sidebar" class="hidden-print">Sidebar</div> <div id="content">Content that moves randomly to the side on page reload</div> </body> </html> 
2 Respuestas
Responde la pregunta0
- Intente eliminar
float: left;desde #sidebar, no necesita ningún elemento flotante con posición fija - Parece que no necesitas
width: auto;en #contenido - ¿Lo intentaste en modo de incógnito, tal vez algunas de las extensiones agregaron algo de html adicional que rompió el diseño? Pero voto por la p. 1. con flotador innecesario.
0
Descubrí que el problema ocurre cuando la página no tiene barra de desplazamiento pero expande algún elemento (como un acordeón, por ejemplo) y el navegador muestra la barra de desplazamiento. Si vuelve a cargar, el contenido se desplaza según el ancho de la barra de desplazamiento del navegador.
La solución que encontré fue establecer body { overflow-y: scroll; } para que la barra de desplazamiento esté siempre visible.