anchura Fluid posición fija

Question

Imagínese:

<div class="outer"> 
    <div class="inner"> 
    </div> 
</div> 

Donde:

• .outer es parte de una estructura de la columna, y su anchura es un percentil y por lo tanto fluido.
• .inner representa un elemento de posición fixed que debe llenar con un 100% de ancho el elemento .outer. Sin embargo, su posición vertical sigue siendo la misma, por lo tanto, fixed.

He tratado de poner en práctica esta disposición con el siguiente CSS:

.outer { 
    position: relative; 
    width: %; 
} 
.inner { 
    position: fixed; 
    width: 100%; 
} 

Sin embargo, .inner no calcula su anchura como un porcentaje de su padre relative. En su lugar, ocupa todo el ancho de la ventana/documento. Intentar con cualquier propiedad left o right tiene como resultado las mismas cualidades que ignoran los padres.

¿Hay alguna forma de evitar esto?

Answer 1

Puede echar un vistazo a este jsfiddle que hice que ilustra la solución a su problema, puede usar este código exactamente como lo hace.

Answer 2

position: fixed siempre es relativo a la ventana/navegador, por lo tanto, no se puede utilizar para resolver su problema. El posicionamiento fijo elimina el elemento del orden natural del DOM, y por lo tanto ya no se queda dentro de su div externo, por lo tanto, se necesita todo el ancho del navegador y no de su contenedor. Lo que necesita utilizar es position: absolute para colocar .inner en relación con .outer. Podrás posicionar tu elemento así como también tener su ancho contenido en el div .outer.

Answer 3

position:fixed siempre es relativo a la ventana del navegador/ventana gráfica, no a los antepasados.

Answer 4

¿Qué tal el uso de algo como esto fiddle?

.outer { 
    width: 20%; 
    height: 1200px; 
    margin-left: 5%; 
    float: left; 
} 
.inner { 
    height: 200px; 
    position: fixed; 
    top: 0; 
    background: orange; 
    right: 75%; 
    left: 5%; 
} 

Answer 5

.outer { 
    position: relative; 
    width: %; 
} 
.inner { 
    position: fixed; 
    width: inherit; 
} 

Que debe hacer el truco.

Answer 6

Utilice esta:

.inner { posición: fijo; izquierda: 0; derecha: 0;

}

Answer 7

Los elementos fijos solo toman valores absolutos como ancho. Si el contenedor principal es fluido (el ancho es un porcentaje), debe establecer el ancho del elemento fijo de forma dinámica. Necesita obtener el ancho del contenedor de envoltura y configurarlo en el elemento adhesivo.

CSS

.outer {width: 25%;} 
.inner {position: fixed;} 

JS

var fixedWidth = $('.outer').css('width'); 
$('.inner').css('width', fixedWidth); 

Además, se puede añadir un detector de eventos en la ventana caso cambia de tamaño.

JS

window.addEventListener('resize', resize); 
function resize() { 
    var fixedWidth = $('.outer').css('width'); 
    $('.inner').css('width', fixedWidth); 
}