enter image description here

Estoy tratando de fijar un DIV flexible (centrado, con ancho máximo) a un encabezado:

position: fixed; 
top: 49px; 
left: 50%;
margin-left: -50px;

Está funcionando bien, pero mi div flexible ya no es "flexible" (es solo el tamaño de ancho máximo). ¿Cómo puedo obtener un div flexible y adhesivo al mismo tiempo?

Violín

Quiero que la roja sea redimensionable y fijada al encabezado

0
BlobDead 6 abr. 2017 a las 17:07

2 respuestas

La mejor respuesta

Puede agregar un position: sticky; top: 0;, colocará el adhesivo en la parte superior de su padre. Digamos dónde colocar un héroe justo debajo del encabezado, se colocará en la parte inferior del héroe.

EDITAR:
Para hacer que este navegador sea compatible, debe usar un polyfill, hay un par para elegir, pero aquí hay dos que utilicé.

1) Filamentgroups polyfill fijo-adhesivo
2) wilddeer polyfill stickyfill

http://jsfiddle.net/shbcgac8/4/

.sticky-card {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: 960px;
    height: 150px;
    margin: 0 auto;
    background: red;
    box-shadow: 0 2px 4px rgba(0,0,0,0.24);
    margin-bottom: 24px; 
}
0
Dejan.S 6 abr. 2017 a las 15:12

Mantenlo fijo, mantén su ancho máximo y luego solo agrega width: 100%;

Cuando reduzca el tamaño de la pantalla, también se reducirá.

0
StefanBob 6 abr. 2017 a las 14:14