css - liquido - Posición fija de ancho de fluido

html shiny

Question

Imagina:

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

Dónde:

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

He intentado implementar este diseño con el siguiente CSS:

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

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

¿Hay alguna manera de evitar esto?

Answer 1

¿Qué hay de usar algo como este 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 2

Los elementos fijos solo toman valores absolutos como ancho. Si su contenedor principal es fluido (el ancho es un porcentaje), debe configurar el ancho del elemento fijo dinámicamente. Debe obtener el ancho del contenedor de envoltura y colocarlo en el elemento adhesivo.

CSS

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

JS

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

Además, puede agregar un detector de eventos en caso de que la ventana cambie de tamaño.

JS

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

Answer 3

Puedes echar un vistazo a este jsfiddle que hice para ilustrar la solución a tu problema, puedes usar este código exactamente como hace lo que quieres.

Answer 4

Utilizar esta :

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

}

Answer 5

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

Answer 6

position:fixed es siempre relativo a la ventana de visualización / navegador, no a los antepasados.

Answer 7

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

Eso debería hacer el truco.