posicion - elemento fijo en css

¿Es posible mantener el ancho del elemento padre cuando se aplica la posición: fijo?

Question

Cuando aplicamos position:fixed a un elemento, se saca del flujo normal del documento, por lo tanto, no respeta su ancho de elemento principal. ¿Hay formas de hacerlo heredar el ancho de sus padres si esto se declara como un porcentaje ? (caso de uso de trabajo a continuación)

let widthis = $(''.box'').width();
$(''.dimensions'').text(`width is ${widthis}`);
$(''button'').on(''click'', function() {
$(''.box'').toggleClass(''fixed'');
let widthis = $(''.box'').width();
$(''.dimensions'').text(`width is ${widthis}`);
});

.container {
max-width: 500px;
height: 1000px;
}
.box {
background-color: lightgreen;
}
.fixed {
position: fixed;
}
.col-1 {
border: 1px solid red;
float: left;
width: 29%;
}
.col-2 {
border: 1px solid pink;
float: left;
width: 69%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click this to toggle position fixed for the left column</button>
<div class="container">
<div class="col-1">
<div class="box">
fixed content<br>
<span class="dimensions"></span>
</div>
</div>
<div class="col-2">
some other content
</div>
</div>

Answer 1

Agregar width:auto; al elemento con position:fixed; para hacer su ancho igual al ancho de su elemento padre.

Answer 2

Como alguien ya sugiere, usar javascript es la mejor solución.

Sin jQuery.

const parentElement = document.querySelector(''.parent-element'');
const fixedElement = document.querySelector(''.fixed-element'');
// get parent-element width when page is fully loaded
// and change fixed-element width accordingly
window.addEventListener(''load'', changeFixedElementWidth);
// get parent-element width when window is resized
// and change fixed-element width accordingly
window.addEventListener(''resize'', changeFixedElementWidth);
function changeFixedElementWidth() {
const parentElementWidth = parentElement.getBoundingClientRect().width;
fixedElement.style.width = parentElementWidth + ''px'';
}

Answer 3

El ancho está cambiando porque el objeto cuando está estático recibe su ancho de porcentaje de su elemento primario. Una vez que configura el objeto como arreglado, ya no está en flujo y cambia el tamaño.

Tendrás que establecer un tamaño para tu menú de navegación por sí mismo y no esperar que el elemento obtenga su ancho del elemento principal.

.nav {
position: fixed;
width: 20%;
border: 1px solid green;
padding: 0px;
list-style-type:none;
background:lightblue;
}

http://tinker.io/3458e/5

Answer 4

Este es un desafío interesante. Para abordar esto, primero debemos entender lo que realmente funciona.

Comprender fijo

A diferencia de absolute , fixed no se posiciona desde su elemento primario relativo más cercano . En cambio, fixed posiciones fixed sí mismo relativo a la ventana gráfica . La ventana gráfica siempre permanecerá fija, por lo que obtienes el efecto que tienes.

Dicho esto, siempre que "heredes" cualquier ancho será respectivo a la ventana gráfica . Por lo tanto, no nos sirve de nada cuando intentamos establecer el ancho de nuestro elemento objetivo al ancho de su padre.

Aprenda más sobre los diferentes comportamientos de position .

Soluciones rápidas

Hay dos enfoques para arreglar esto.

Pure CSS

Podemos usar CSS puro para solucionar este problema, pero necesitaríamos saber el ancho por adelantado . Supongamos que su elemento padre es 300px;

.parent{
width: 300px;
}
.parent .fixed_child{
position: fixed;
width: 300px;
}

JS

Ahora, con los dispositivos móviles , realmente no podemos darnos el lujo de tener anchos establecidos , especialmente cualquier elemento de más de 300px . El uso de porcentajes tampoco funcionará, ya que será relativo a la ventana gráfica y no al elemento principal. Podemos usar JS , en este caso con jQuery para lograr esto . Echemos un vistazo a una función que siempre establecerá el ancho de la paren en el momento dado:

 function toggleFixed () {
var parentwidth = $(".parent").width();
$(".child").toggleClass("fixed").width(parentwidth);
}

css:

.fixed{
position:fixed;
}

Ver en CodePen

Anchos dinámicos

Eso está bien y elegante, pero ¿qué sucede si el ancho de la ventana cambia mientras el usuario todavía está en la página, cambiando el elemento padre con esto? Mientras que el padre puede ajustar su ancho, el niño mantendrá el ancho establecido que la función estableció. Podemos arreglar esto con jQuery''s detector de eventos resize() jQuery''s . Primero necesitaremos dividir la función que creamos en dos:

function toggleFixed() {
adjustWidth();
$(".child").toggleClass("fixed");
}
function adjustWidth() {
var parentwidth = $(".parent").width();
$(".child").width(parentwidth);
}

Ahora que hemos separado cada parte, podemos llamarlas individualmente, incluiremos nuestro método de botón original que alterna el ancho fijo y el ancho:

$("#fixer").click(
function() {
toggleFixed();
});

Y ahora también agregamos el detector de eventos de cambio de tamaño a la ventana:

 $(window).resize(
function() {
adjustWidth();
})

Ver en CodePen

¡Ahí! Ahora tenemos un elemento fijo cuyo tamaño se ajustará cuando se cambie el tamaño de la ventana.

Conclusión

Hemos abordado este desafío al comprender la posición fixed y sus limitaciones. A diferencia de Absolute, fixed solo se relaciona con el puerto de visualización y, por lo tanto, no puede heredar el ancho de su principal.

Para resolver esto, necesitamos usar algo de magia JS, que no tomó mucho con jQuery, para lograr esto.

En algunos casos, necesitamos un enfoque dinámico con dispositivos de escala de diferentes anchuras. Nuevamente, tomamos el enfoque JS.

Answer 5

Esto es probable debido a algún margen o relleno predeterminado en el elemento <html> o <body> . Cuando es estático, su tamaño se basa en el ancho del <body> en ese momento, pero cuando cambia a la position:fixed con respecto a la ventana gráfica.

Como tal, eliminar ese margen / relleno predeterminado debería solucionar el problema (en mi experiencia body { margin:0; } corrige) como cambiar el tamaño cuando se soluciona (como width:calc(n% - 5px); ).

Answer 6

Hola, también puedes usar jquery para mantener el ancho. Por ejemplo:

jQuery(function($) {
function fixDiv() {
var $cache = $(''#your-element'');
var $width = $(''#your-element'').parent().width();
if ($(window).scrollTop() > 100) {
$cache.css({
''position'': ''fixed'',
''top'': ''10px'',
''width'': $width
});
} else {
$cache.css({
''position'': ''relative'',
''top'': ''auto''
});
}
}
$(window).scroll(fixDiv);
fixDiv();
});

Answer 7

Puede usar width:inherit . Esto hará que escuche a los padres. Lo pruebo y funciona en Firefox.

Answer 8

Una solución alternativa podría ser: left:8px; right:0; width:18%; left:8px; right:0; width:18%; en el CSS para el navegador No es la mejor solución sin embargo.