CSS: use calc () para mantener iguales los anchos de los elementos

2 minutos de lectura

Avatar de usuario de Marc M.
marc m

¿Es algo así posible en CSS?

<table>
  <tr>
    <td id="elementOne">elementOne</td>
    <td id="elementtwo">elementtwo</td>
  </tr>
</table>

<div style="width: calc(document.getElementById(elementOne).width)"></div>

Para que el div sea siempre del mismo ancho que elementOne.

¿Existe tal característica en CSS, usando calc() o algún otro medio?

  • No, no existe tal función (AFAIK, algo así ha sido compatible con IE Hasta que versión 7) pero tiene una característica aún más poderosa: JavaScript.

    – Adriano Repetti

    15 de abril de 2014 a las 6:57

  • esto fue llamado expression() en IE, y fue una mala idea: stackoverflow.com/questions/527861/…

    – león

    15 de abril de 2014 a las 7:06

Avatar de usuario de Simon Rigét
simon riget

Utilice variables CSS:

<style>
:root { --width: 100px; } /* Set the variable --width */

table td{
  width: var(--width);    /* use it to set the width of TD elements */
  border: 1px solid;
}
</style>

<table>
  <tr>
    <td class="tab">elementOne</td>
    <td class="tab">elementtwo</td>
  </tr>
</table>

<!-- reuse the variable to set the width of the DIV element -->
<div style="width: var(--width); border: 1px solid;">Element three</div>

También puede usar variables en la función calc():

<div style="width: calc(var(--width) * 3); border: 1px solid;">Element four</div>

  • Tenga en cuenta que las variables CSS no se admiten muy bien en IE y Edge (y muchos otros navegadores más pequeños); caniuse.com/#feat=css-variables

    – cuidado ahora1

    10 de abril de 2017 a las 22:47

  • Gracias, esto es exactamente lo que necesitaba.

    – Sasino

    23 de abril de 2022 a las 6:36

avatar de usuario de leo
León

No, no es posible con CSS.

Para eso tendrás que usar JavaScript (document.getElementById(elementOne).offsetWidth o similar, dependiendo exactamente del ancho que esté buscando). Calc es usó para hacer matemáticas, no para ejecutar scripts. No hay forma de poner JS en una declaración CSS, como está tratando de hacer.

Para obtener más ayuda sobre el bit JS, consulte ¿Cómo recupero el ancho y el alto reales de un elemento HTML?

Editar: para obtener algunos antecedentes sobre por qué sería una mala idea implementar esto en CSS, consulte Cálculo de valor para CSS (TL; DR: se ha intentado. Las cosas explotaron)

Sí. Hay 2 formas posibles de hacer esto con CSS (aunque no con calc):

1) Si sabe cuántas columnas tiene, simplemente use% (es decir, 50% para 2 columnas)

2) Si no sabe cuántas columnas tiene o tal vez no pueda usar % para cualquier caso de uso que pueda tener, entonces puede usar caja flexible. Según el objetivo de compatibilidad de su navegador, puede combinar la sintaxis “antigua” y “nueva” para obtener resultados sorprendentes.

¿Ha sido útil esta solución?