0

¿Se puede "extraer" el valor de un atributo para un selector CSS?

Por ejemplo, si al header le asigne un height: 150px. ¿Podría saber cual el el valor de height del header?

Quiero hacer algo como:

main {
    height: calc(100vh - header---height);
}

Editado:

No tengo ni idea del alto que tiene el header en realidad, de echo tengo varios headers con diferentes alturas.

3
  • Y ese valor de dónde vendría? Commented el 23 jun. 2021 a las 14:04
  • @JeanGotopo ¿dices header---height?, eso quiero yo saber, en JS podría ser una funcion, attrVal(header, 'height'), o algo así... quiero saber si existe alguna forma nativa en CSS de obtener esto..
    – Orici
    Commented el 23 jun. 2021 a las 14:09
  • Lo que quiero decir, es que no tengo claro si lo estás presentando como una variable, que no depende de ti, si no de otra cosa que pase en tu código y genere ese valor de height. Commented el 23 jun. 2021 a las 14:11

1 respuesta 1

0

Para declarar propiedades personalizadas (variables) usamos un nombre que comienze con dos guiones (--), y un valor que puede ser cualquier valor válido de CSS. Como cualquier otra propiedad, la escribimos dentro de un set de reglas de estilo, algo así:

elemento {
  --main-height: 150px;
}

Ten en cuenta que el selector que usemos para las reglas de estilo define el ámbito (scope) en el que podremos usar la propiedad personalizada (variable). Una buena práctica común es declarar variables en la pseudo-clase :root, y así aplicarlas globalmente al documento HTML:

:root {
  --main-height: 150px;
}

Entonces en tu código puedes hacer esto:

main {
    height: calc(100vh - header-(--main-height));
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.