Foros del Web » Creando para Internet » CSS »

Problema con un una ventana fixed y su display

Estas en el tema de Problema con un una ventana fixed y su display en el foro de CSS en Foros del Web. Hola chicos que tal como va todo. Muchachos como siempre acudo por que tengo un problema, y es que tengo una box que tiene dentro ...
  #1 (permalink)  
Antiguo 26/12/2014, 22:53
Avatar de sonickseven  
Fecha de Ingreso: diciembre-2012
Ubicación: bogota
Mensajes: 404
Antigüedad: 11 años, 3 meses
Puntos: 2
Problema con un una ventana fixed y su display

Hola chicos que tal como va todo. Muchachos como siempre acudo por que tengo un problema, y es que tengo una box que tiene dentro otras cajas, pero en algun momento unas cajas cambian de tamaño y las otras no, la cosa es que la caja madretambien cambia de tamaño, y eso es lo que estoy tratando de evitar. pero ya pase mas de 2 horas dandole y tambien buscando en internet pero no he encontrado solucion. A continuecion les ilustrare mi problema:

las ventans sin cambiar de tamaño, serian las verde oscuro. ahi un div que puse para ver si asi podia solucionarlo(fallido intento) que es de color verde clarito, y el contenedor padre que es de color rojo.


ahora cambio la ventana de tamaño sucede esto:
la ventana padre se ajusta al tamaño de la ventana cambiada de tamaño, que es lo que quiero evitar


ahora como me gustaria que quedara es asi:


sin que la ventana madre(padre) cambie de tamaño.

Diganmen que si es posible!!!!!

Gracias chicos.
  #2 (permalink)  
Antiguo 27/12/2014, 03:51
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Problema con un una ventana fixed y su display

Podrías flotar los elementos. Así su altura no afecta al contenedor a menos que quieras. Otra solución sería usar posiciones absolutas.

Es mejor publicar código que imágenes.
__________________
(:
  #3 (permalink)  
Antiguo 27/12/2014, 11:51
Avatar de sonickseven  
Fecha de Ingreso: diciembre-2012
Ubicación: bogota
Mensajes: 404
Antigüedad: 11 años, 3 meses
Puntos: 2
Respuesta: Problema con un una ventana fixed y su display

YA NO TIENEN EL DIV DE COLOR VERDE CLARITO QUE ESTA EN LA GRAFICA DE ARRIBA, SOLO LO PUSE POR SI SERVIA PERO NO, ASI QUE PARA EVITAR MAYOR CODIGO LO QUITE.

ok bueno, ya pude solucionarlo, no de la forma que queria, pero bueno, intente con tu opinion de los float pero no funciono debido a que e contenedor es de posicion fixed.

codigo anterior (tu lo pediste :D )
Código CSS:
Ver original
  1. #padre{
  2. background: rgba(0,0,0,.4);
  3. z-index: 1111;
  4. position: fixed;
  5. bottom: 0;
  6. right: 0;
  7. }
  8.  
  9. #padre>i {/*serian los cuadritos verdes oscuros*/
  10. transition: transform .5s;
  11. cursor: pointer;
  12. height: 60px;
  13. width: 60px;
  14. display: inline-block;
  15. border-radius: 50%;
  16. border: 2px solid #fff;
  17. }
  18.  
  19. #padre>div{/*serian el cuadro grande  verde oscuro*/
  20. width: 267px;
  21. height: 437px;
  22. vertical-align: top;
  23. transition: transform 1s, opacity .5s linear .3s;
  24. resize: both;
  25. overflow: hidden;
  26. position: relative;
  27. display: inline-block;
  28. margin-right: 5px;
  29. min-height: 150px;
  30. padding: 4px 7px 4px;
  31. min-width: 150px;
  32. width: 200px;
  33. border: 1px solid black;
  34. border-radius: 7px;
  35. height: 283px;
  36. }

listos ahi esta el codigo.

ahora la forma en la que lo pude solucionar fue que cuando el #padre>div hiciera un fadeIn o una redimención con javascript le pondria un margin-top negativo(acerlo dinamico), aparte tambien le puse una altura fija a la ventana padre de 67px para que no se ajustara a sus ventanas hijas.

como lo deje:
Código CSS:
Ver original
  1. #padre {
  2. height: 66px;
  3. background: rgba(0,0,0,.4);
  4. z-index: 1111;
  5. position: fixed;
  6. bottom: 0;
  7. right: 0;
  8. }
y el javascript
Código Javascript:
Ver original
  1. function se(tag){
  2.       return document.querySelector(tag);
  3. }
  4. function marginChat(cod, fx){//cod seria el seleccionador ejemplo:  '#padre>div'
  5.     if(fx!==undefined)
  6.         se(cod).style.marginTop='0';
  7.     else
  8.         se(cod).style.marginTop='-'+(se(cod).offsetHeight-64)+'px';
  9. }
y ya con eso la ventana padre nunca va acambiar de tamaño, lo único que cambia es el marginTop de la ventana hija "#padre>div"

SI tienes otra forma que sea solo con CSS te lo agradeceria

Etiquetas: color, display, fixed, tamaño, todo, ventana
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:37.