Columns of one height



  • There's a template with four columns that should be the same height. To achieve this objective, use the function of:

    $(document).ready(function() {
        function setEqualHeight(columns) {
            var tallestcolumn = 0;
            columns.each(
                function() {
                    currentHeight = $(this).height();
                    if (currentHeight > tallestcolumn) {
                        tallestcolumn = currentHeight;
                    }
                }
            );
            columns.height(tallestcolumn);
        }
    
    setEqualHeight($(".EqualHeights"));
    

    });

    When the page is downloaded, it's fine, but when the width of the browser window changes, the text starts to fall out of the column like it's not. When the page is downloaded, it's all right again. Explain how to prevent the rolling of the text from the column when the width of the browser window changes.



  • We'll have to put the processor on the window and inside to call your function.

    function setEqualHeight(columns) {
       ...
    }    
    

    $(document).ready(function() {
    ...
    setEqualHeight($(".EqualHeights"));
    ...
    });

    $(window).resize(function() {
    ...
    setEqualHeight($(".EqualHeights"));
    ...
    });

    Details of the .resize() can be read here.
    https://api.jquery.com/resize/




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2