javascript - センターディビジョンが小さい場合にのみ、センターディビジョンをサイドディビジョンと同じサイズにします

Question

センターディビジョンがレフトサイドバー2よりも小さい場合に限り、センターディビジョンをレフトサイドバー2と同じ高さにするにはどうすればよいですか？これが純粋なCSSで実行できるかどうか、またはこれにJSを使用する必要があるかどうかとその方法がわかりません。

マイページ

Answer 1

これはjavascriptで行う必要があります...ここではjqueryを使用します。これをタグに入れて、適切な変更を加えます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    (function () {
        function changeHeight() {
            $centerDiv = $('#centerDivId');
            $leftBar = $('#leftBarId');
            if ($centerDiv.height() < $leftBar.height()) {
                $centerDiv.css('height', $leftBar.height())
            }
        }
    });
</script>

Answer 2

CSS3min-heightプロパティを使用して、中央の divの最小の高さを設定できます。

Answer 3

jQuery(document).ready(function() {
    var $center = jQuery('.center-selector');
    $center.height(getCenterHeight());
});

var getCenterHeight = function() {
    var $left = jQuery('.left-sidebar-container-selector');
    var $right = jQuery('.right-sidebar-container-selector');

    var leftHeight = parseInt($left.height(), 10);
    var rightHeight = parseInt($right.height(), 10);

    return Math.max(leftHeight, rightHeight);
};