Nwht0xn1

画面の高さに応じてテキストエリア周辺の高さを調整するCreated on 2016-04-30 by r7kamura

概要

大きい画面でエディタの高さを調整するようにしました - WikiHub Help で紹介した機能の実装について。画面の高さに応じて、テキストエリア周りの高さをいい感じに調整したい。

コードの説明

.js-fluid-height というセレクタに一致する要素が存在する場合、画面と兄弟要素の高さを調べて高さをめいっぱい拡げる。

コード

jQuery(function ($) {
  $('.js-fluid-height').each(function () {
    var otherElementsHeight = 0;
    $(this).siblings().each(function () {
      var $sibling = $(this);
      if ($sibling.is(':visible')) {
        otherElementsHeight += $sibling.outerHeight();
      }
    });
    var availableHeight = window.innerHeight - otherElementsHeight;
    var $self = $(this);
    var paddingHeight = $self.innerHeight() - $self.height();
    var configurableHeight = availableHeight - paddingHeight;
    if ($self.height() < configurableHeight) {
      $(this).height(configurableHeight);
    }
  });
});

適用前

image

適用後

image

flexboxに比べた利点

flexboxを利用すると、スマートフォンのような小さな画面でも常に高さが調整されてしまう。今回のやり方であれば、比較的簡単に画面の高さが小さい場合に調整しないように抑制できる。