Tengo una pregunta acerca de cómo obtener un div altura. Soy consciente de .height() y innerHeight(), pero ninguno de ellos hace el trabajo para mí en este caso. La cosa es que en este caso tengo un div que es desbordado por el ancho de un overflow: scroll y el div tiene una altura fija.

Si puedo usar .height() o innerHeight(), tanto de ellos me da la altura de la zona visible, pero si quiero que el desbordado a tener en cuenta, ¿cómo hago?

InformationsquelleAutor emilolsson | 2010-03-26

5 Comentarios

  1. 281

    Utilizar el .scrollHeight propiedad del nodo DOM: $('#your_div')[0].scrollHeight

    • De acuerdo a la comentar el .scrollHeight DOM función no funciona en IE <8.0 (developer.mozilla.org/en/DOM/element.scrollHeight)
    • Mira aquí: quirksmode.org/dom/w3c_cssom.html – IE < 8 el DOM scrollHeight es aplicado, pero de forma incorrecta. Para mí funciona en IE 6, 7 en netrenderer pero puede que no funcione en todos los casos.
    • scrollHeight también a veces se vuelve cero cuando está oculto (o su padre está oculto), molesto.
    • me puedes decir si funciona en opera o no, por favor?
    • Más correctamente, utilice $(‘#your_div’).prop(‘scrollHeight’);
    • en mi caso es sólo devuelve el número de visibles píxeles en un elemento con overflow: hidden :/
    • javascript puro: document.getElementById('your_div').scrollHeight
    • Sí no funciona. Solamente se muestra visible de la altura 🙁

  2. 7

    Para obtener más información acerca de .scrollHeight de propiedad se refieren a la docs:

    La Elemento.scrollHeight atributo de sólo lectura es una medida de la altura del contenido de un elemento, incluyendo el contenido no es visible en la pantalla debido a desbordamiento. El scrollHeight valor es igual al valor mínimo clientHeight el elemento sería necesario para que quepa todo el contenido en el punto de vista sin necesidad de utilizar una barra de desplazamiento vertical. Se incluye el elemento de relleno, pero no su margen.

  3. 3

    Otra posibilidad consistiría en lugar del código html en una no overflow:hidden elemento colocado ‘fuera’ de la pantalla, como una posición absoluta arriba y a la izquierda lesse, a continuación, 5000 px, entonces lee este elementos de altura. Su fea, pero trabajan bien.

    • Yo no recomendaría el uso de este para el SEO es importante, puede parece extraño para el lector de pantalla. Si usted hace esto, usted tendrá que poner el código HTML en un div sólo por el tiempo que usted está leyendo y retírela inmediatamente después con javascript. Pero la aceptó respuesta es mejor para esta situación
  4. 0

    Para aquellos que no se desborde, pero esconderse por el margen negativo:

    $('#element').height() + -parseInt($('#element').css("margin-top"));

    (feo, pero sólo uno que funciona hasta ahora)

  5. -1

    Otra solución sencilla (no muy elegante, pero no demasiado feo también) es colocar un interior div /span, a continuación, obtener su altura ($(this).find('span).height()).

    Aquí es un ejemplo del uso de esta estrategia:

    JS:

    $(".more").click(function(){
    if($(this).parent().find('.showMore').length) {
    $(this).parent().find('.showMore').removeClass('showMore').css('max-height','90px');
    $(this).parent().find('.more').removeClass('less').text('More');
    } else {
    $(this).parent().find('.text').addClass('showMore').css('max-height',$(this).parent().find('span').height());
    $(this).parent().find('.more').addClass('less').text('Less');
    }
    });

    CSS:

    * {transition: all 0.5s;}
    .text {position:relative;width:400px;max-height:90px;overflow:hidden;}
    .showMore {}
    .text::after {
      content: "";
        position: absolute; bottom: 0; left: 0;
            box-shadow: inset 0 -26px 22px -17px #fff;
        height: 39px;
      z-index:99999;
      width:100%;
      opacity:1;
    }
    .showMore::after {opacity:0;}
    .more {border-top:1px solid gray;width:400px;color:blue;cursor:pointer;}
    .more.less {border-color:#fff;
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
    <div class="text">
    <span>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </span></div>
    <div class="more">More</div>
    </div>

    (Este ejemplo específico es el uso de este truco para animar el máximo de altura y evitar la animación de retraso al colapso (cuando se utiliza un número elevado para el max-altura de la propiedad).

Dejar respuesta

Please enter your comment!
Please enter your name here