Tengo un CSS diseño de 2 columnas. la columna de navegación de la izquierda es un fix div. Se queda allí mientras se desplaza hacia abajo el contenido principal en la columna a la derecha.

El problema viene cuando puedo reducir la ventana del navegador, o zoom in: cuando el desplazamiento del navegador windom horizontalmente, el contenido principal de la derecha se inicia la superposición de la columna de navegación de la izquierda.

¿Cómo puedo solucionarlo para que sea cual sea el tamaño de mi ventana del explorador o mi nivel de zoom es que cuando la barra de desplazamiento horizontal fijo div no se superponen, pero empuja la columna principal a la derecha?

Se puede ver de verdad en: http://justarandomone.tumblr.com/

Todo el código está en el origen (es bastante desordenado, lo siento por eso).

La esperanza de que algún otro puede ayudar. Gracias!

  • Me parece que no puede duplicar el problema. Se ve bien para mí. ¿Qué navegador y versión del sistema operativo y están viendo este problema? Tal vez usted podría publicar una captura de pantalla del problema o el código.

4 Comentarios

  1. 1

    no es realmente un problema en mi opinión..
    de todos modos creo que se podría solucionar poniendo el principal bloque de contenido en un div y dándole posicionamiento absoluto.
    quitar el flotador:a la izquierda de la barra lateral, no es necesario.

    #container {
        width:751px;
        margin-top:56px;
    }
    
    #sidebar {
        width:235px;
        position:fixed;
        top: 0px;
        left: 0px;
    }
    #content {
        position: absolute;
        top: 0px;
        left: 235px;
        width: 516px; /* 751 -235 */
    }
  2. 1

    puede dar el #de la barra lateral un color de fondo sólido (por ejemplo, blanco); colóquelo en la parte superior de la pila con z-index (cualquier número mayor que el z-index de la derecha, por ejemplo, 1); además, puede que desee para estirar el #sidebar con la altura: 100%. Finalmente, usted probablemente querrá la #sidebar aparecen cubriendo toda la altura de la parte izquierda, puede añadir «top: 0» para lograr eso.

  3. 0

    Soy capaz de recrear cuando la reducción de Cromo para anormalmente pequeños tamaños de ventana y también en un iPhone. Configuración de la barra lateral div a position:fixed obliga a permanecer en la posición, causando problemas con el desplazamiento horizontal.

    He cambiado la barra lateral position:absolute y, a continuación, sincronizado el top-margin tanto para la barra lateral y blogroll y parece estar funcionando bien.

  4. 0

    Sugerencia posible. el uso de css para establecer tanto ‘blogroll’ y ‘sidebar’ de altura en el mismo valor (he utilizado el 100% en este ejemplo). Ts añadir » overflow: auto;’ a ‘blogroll’

    #sidebar {
        width:235px;
        height:100%;
        float:left;
        clear:both;
        position:fixed;
    }
    
    #blogroll {
        width:558px;
        margin-left:290px;
        position:absolute;
        min-height:300px;
        height: 100%;
        overflow:auto;
        padding-bottom:27px;
        padding-top: 171px;
    }

    Esto hará que el blogroll a tener sus propias barras de desplazamiento dentro de la página(por lo que uno haría uso de ellos, y, teóricamente, que la página no tiene ninguna. Para asegurarse de que, que tu cuerpo margen a 0 para ie.
    Debería funcionar.

Dejar respuesta

Please enter your comment!
Please enter your name here