2

Buenas tardes. Tengo tres principales div, un parent y dos child. El parent es un flexbox, por lo que sus hijos se ajustarán al ancho de la página. El problema es que quiero que uno solo de los dos hijos/child te siga mientras navegas.

Actualmente, la página web tiene esta visualización: erth5rty

El primer div es básicamente el que tiene todo el contenido, el de la izquierda. El segundo es el de la derecha, color rojo. Quisiera que este último te siguiera mientras scrolleas/navegas. Para esto puedo usar position: fixed.

Sin embargo, cuando activo esta posición el div rojo se sobrepone encima del azul. Lo que quiero es que se siga manteniendo a la derecha. ¿Cómo puedo realizar esto? ¿Usando margin?

Aquí tienen un JSfiddle. El div izquierdo tiene class = main y el derecho class = images (este es el que tiene position: fixed, pueden eliminar esta propiedad para que vean cómo se ajusta pero no te sigue).

4
  • 2
    No entiendo qué es lo que no funciona, no veo en que punto se sobrepone al de la izquierda.
    – Shaz
    Commented el 22 sept. 2016 a las 19:31
  • Estaba de acuerdo con @Shaz porque yo lo veía bien pero en chrome sí que falla el flexbox con posisión fixed.
    – user7176
    Commented el 23 sept. 2016 a las 8:02
  • Yo lo probé en chrome de hecho ;)
    – Shaz
    Commented el 23 sept. 2016 a las 11:57
  • @Shaz tienes que cambiar el valor de la propiedad position a fixed.
    – alejnavab
    Commented el 23 sept. 2016 a las 20:52

3 respuestas 3

1

Lo que dices no tiene mucho sentido por las siguientes razones:

  • Al hacer la parte izquierda absoluta o fija, el cuerpo del padre no crecerá.
  • Si haces la parte derecha fija entonces usar flexbox carece de sentido por que no aplicará si tiene position: fixed.

Lo que deseas puedes realizarlo de dos formas:

  1. Dándole un posicion fixed al div de la derecha.
  2. Dándole un alto del 100% del view height Y un overflow: auto al div del contenido.

Ambas resultarán en lo mismo, pero la segunda opción es más limpia.

Marcado

<section class="parent">
  <section class="child">
    <div class="content">A</div>
  </section>
  <section class="child">
    <div class="content">B</div>
  </section>
</section>

Opción #1

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.parent {
  overflow: auto;
  max-height: 100vh;
}
.child:first-of-type {
  background-color: gold;
  overflow: auto;
  width: 50%;
}
.child:last-of-type {
  background-color: teal;
  height: 100%;
  position: fixed;
  right: 1.6%;
  top: 0;
  width: 50%;
}
.content {
  background-color: coral;
  color: #fff;
  display: flex;
  font-family: 'segoe ui';
  font-size: 48pt;
  font-weight: lighter;
  height: 1500px;
  justify-content: center;
  margin: 0px auto;
  width: 100px;
}

Vemos como al div derecho le hemos dado right: 1.6%. Esto es necesario de lo contrario, tapará el scrollbar. Puedes ponerlo a 0 y verlo por tú mismo.

Opción #2

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.parent {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.child {
  flex: 1;
}
.child:first-of-type {
  background-color: gold;
  overflow: auto;
}
.child:last-of-type {
  background-color: teal;
}
.content {
  background-color: coral;
  color: #fff;
  display: flex;
  font-family: 'segoe ui';
  font-size: 48pt;
  font-weight: lighter;
  height: 1500px;
  justify-content: center;
  margin: 0px auto;
  width: 100px;
}

Esta solución es la más limpia. No necesitamos hacer uso de position: fixed. Tan solo el padre deberá tener el 100% del view height y el div izquierdo, igual, pero haciéndolo scrollable con overflow: scroll.

Demos

1
  • "Si haces la parte derecha fija entonces usar flexbox carece de sentido por que no aplicará si tiene position: fixed.". Esto no es del todo cierto ya que el problema es en Chrome (quizá en webkit) pero en Firefox e IE funciona perfectamente.
    – user7176
    Commented el 23 sept. 2016 a las 8:08
1

Intenta con esto.

div.images {
width: 100%;
flex-grow: 1;
background-color: red;
height: 100vh;
margin-left: 68%; <---- Solo inserta esto
position: fixed;
}

¿Es esto lo que deseas?

0

Yo lo haría con un

float: right; 

Lo usas en el div que quieres que se mantenga a la derecha.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.