GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Variável CSS com Valor de Propriedade Anterior

Vi a doc sobre variáveis CSS e não sei se estou enganado, mas me pareceu ser possível fazer o que pretendo, apenas usando javascript/frameworksJS/libJS. Preciso definir a largura de um footer para auto e na linha seguinte preciso posícioná-lo no meio da tela, como não sei qual o tamanho que o footer vai ter, preciso de algo assim, left: calc(50% - valorDinamico/2)); É possível fazer só com CSS?
#footer {
position: absolute;
bottom: 0;
width: auto;
left: calc(50% - (valorDinamico/2));
}

Você pode, via javascript, alterar o estilo do elemento. Em JS puro, seria algo assim:

let valorDinamico = 10; // valor qualquer
document.getElementById("footer").style.left = "calc(50% - " + valorDinamico + ")";

Acho que é mais prático fazer a conta valorDinamico/2 antes, em vez de fazer algo assim:

document.getElementById("footer").style.left = "calc(50% - (" + valorDinamico + "/2))";

Mas aí fica a seu critério.

Usando alguma biblioteca, vai depender de como ela altera o css. Em jQuery, seria algo como:

$("#footer").css("left", "calc(50% - " + valorDinamico + ")");

Abraço.

Eu prefiro com CSS, porque tem aquele pequeno efeito de transição quando se usa JS, como se fosse um efeito proposital. Pelo jeito, só é possível com JS, é isso?

Tenho quase certeza de que é possivel só com CSS, mas para te ajudar eu precisaria entender melhor o que exatamente vc quer fazer.

Se vc puder colocar um print ou uma imagem que mostre o resultado esperado ajudaria.

De qualquer forma, no link abaixo vc pode ver uma das possiveis soluções:

https://codepen.io/wldomiciano/pen/ZEEvJzK

EDIT:

Relendo sua pergunta, acho que entendi melhor. Quando vc diz “posicioná-lo no meio da página” vc quer dizer centralizar horizontalmente, né?

Se for só isso, vc poderia fazer assim:

footer {
  width: fit-content;
  margin: auto;
}

Com width: fit-content a largura será apenas tão grande quanto seu conteúdo exigir e o margin: auto cuida de centralizar.

Mas novamente: pra ajudar melhor eu precisaria de maiores explicações como descrevi acima.

//