1

Lo que quiero es pillar la altura total de la pagina y aplicarle un CSS dependiendo del resultado.

JS:

$altura = document.body.scrollHeight;

CSS:

#id{
height: $altura;
}

Algo así, como se debería hacer?

4 respuestas 4

3

La altura total de la página en CSS es 100vh y el ancho es 100vw

Actualmente no se pueden pasar variables de JS a CSS

Solución:

#id {
    height: 100vh;
}

Pd: Cuanto menos uses el JS, mejor para el WPO de tu web

6
  • 1
    Perfecto, gracias de nuevo! Commented el 8 sept. 2017 a las 14:17
  • Me la das por buena ? :( Commented el 8 sept. 2017 a las 14:34
  • Actualmente no se pueden pasar variables de JS a CSS. Eso no es del todo cierto. Puesto que puedes aplicar estilos CSS desde JS, entonces podemos decir que sí se pueden pasar variables de JS a CSS.
    – A. Cedano
    Commented el 10 sept. 2017 a las 22:27
  • Soy consciente de que se pueden aplicar estilos en línea, pero aparte de que no son recomendables, no es lo que se pedía :( Commented el 11 sept. 2017 a las 7:43
  • Daniel resulta que no funciona del todo bien, si creo un nuevo dato via formulario y me hace un return a la pagina, no pilla el 100% del height con 100vh (recargo la pagina sin cache, y sigue sin pillar el 100%, sabes como solucionarlo? @DanielDíaz Commented el 12 sept. 2017 a las 10:25
1

Puedes aplicar el css desde Javascript. Por ejemplo, usando querySelector (también es posible de otra forma en caso de incompatibilidad, ya que querySelector no es compatible con navegadores antiguos [ver especificaciones en el enlace]).

//Usamos parseInt para quitar las letras como px
var paginaAltura = parseInt(window.getComputedStyle(document.querySelector("body")).height);
console.log("Altura inicial body: " + paginaAltura);


var paginaAlturaNew = parseInt((paginaAltura + 100));
console.log("Nueva altura body: " + paginaAlturaNew);


document.querySelector('body').style.height = paginaAlturaNew + "px";

console.log("Altura final del body : " + window.getComputedStyle(document.querySelector("body")).height);

// Con un div

var divAltura = parseInt(window.getComputedStyle(document.querySelector("#test")).height);
console.log("Altura inicial div: " + divAltura);


var divAlturaNew = parseInt((divAltura + 100));
console.log("Nueva altura div: " + divAlturaNew);


document.querySelector('#test').style.height = divAlturaNew + "px";

console.log("Altura final del div : " + window.getComputedStyle(document.querySelector("#test")).height);
body {
  height: 100px;
}

#test {
  height: 10px;
}
<body>
  <div id="test">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</body>

0

De la manera que lo planteas no podria hacerse, pero puedes hacerlo asi:

Considerando alto del documento:

document.getElementById("id").style.height = document.documentElement.scrollHeight+"px"

considerando alto del body:

document.getElementById("id").style.height = document.body.scrollHeight+"px"
0

Puedes utilizar Jquery para facilitarte la vida. https://jquery.com/

Una vez cargado jquery puedes utilizar la sentencia:

$(function(){ 
   var windowHeight = $(window).height(); 
   console.log(windowHeight)
});

con esto podrás modificar a tu antojo las propiedades del la ventana como por ejemplo:

$(function(){
   $(document).css({ "background": "chartreuse" });
});
1
  • Acuedd, bienvenid@ a SOes. Tu respuesta es buena, pero el OP etiqueto su pregunta con "javascript". Si pudieras cambiar tu respuesta a Javascript seria muy bueno, en vez de sugerir algo que el OP no usa. Commented el 8 sept. 2017 a las 16:32

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.