2

Tengo un archivo en sass y estoy intentando darle un estilo al .contenedor de mi pagina, lo que quiero es que mi clase .contenedor tenga un min-height de la altura de la pantalla del dispositivo menos el alto en pixeles del navbar que es de 50px

El codigo es el siguiente:

.contenedor{
    min-height: (100vh - 50px);
    background: url("../images/Fondo.png") fixed;
    background-size: cover;
}

introducir la descripción de la imagen aquí Esto no lanza ningún error de compilación pero tampoco hace lo que deseo. ¿quien sabe como obtener la altura de la pantalla del dispositivo y restarle 50px?

la idea es evitar que salga la barra de scroll vertical

3
  • Podrias añadir el resultado que estas logrando?, sea a traves del codigo CSS generado o bien de screenshots. Commented el 22 dic. 2016 a las 20:57
  • Claro ya lo agrego Commented el 22 dic. 2016 a las 21:07
  • Bueno ya lo logre aun que lo hice de otra manera aun me interesa como hacer esto 100vh - 50px Commented el 22 dic. 2016 a las 21:19

1 respuesta 1

4

En SASS no puedes hacer eso por dos razones:

  1. No puedes hacer cálculos en tiempo real, SASS compila y te devuelve un archivo CSS, no tienes acceso al HTML desde SASS.

  2. No puedes mezclar unidades distintas en las operaciones matemáticas en SASS.

Sin embargo puedes hacer algo en CSS con la funcion calc(). Esta función te permite hacer cálculos en tiempo real y manejar diferentes unidades (probado en Firefox, Chrome e IE11):

.contenedor{
    min-height: calc(100vh - 50px );
    background: #ccc;
    border:1px solid
}
<div class="contenedor">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, architecto, voluptatum? Sequi error saepe praesentium accusamus, illo eius minima nobis aliquid perferendis magni, quo quaerat quam unde, ad minus ipsam.</div>

PD: Por supuesto que puedes usarlo en SASS ya que admite sintaxis CSS y al compilar te devolverá la propiedad tal cual, sin hacer la resta.

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.