0

これをどのように説明するのが最善かはわかりませんが、基本的に必要なのは、画面の100％で、高さの50％の内部に2つのdivがあるコンテナdivです。ユーザーが上部のdivのサイズをコンテナのdivの高さの20％〜80％の間で変更し、下部のdivがコンテナをオーバーフローすることなく自動的に満たすことができるようにしたいと思います。私は2つの問題に直面しています：

  1. トップdivの高さを50％に設定した場合（CSSまたはコンテナのoffsetHeightの半分に等しい高さを設定するDOMContentLoaded関数のいずれかを使用）、ユーザーはそれをそのサイズ未満に縮小できません。

  2. どうやらonresizeはChromeのdivで機能しないので、下のdivの高さを変更する方法を見つけることができません。

私が持っている質問は次のとおりです。

  1. これも可能ですか？
  2. 2つのdivの間に要素を配置し、その上でドラッグ可能なhtml5を使用する方がよいでしょうか。サポートする必要がある唯一のブラウザはGoogleChromeです。
  3. それとも、フレームを使用したほうがいいですか？

外部のJavaScriptライブラリは許可されていません。したがって、jQueryはありません。

これが私がこれまでに持っているものです：

<html>
<head>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function set_top_div_height() {
            var container_height = document.getElementById('container').offsetHeight;
            var top_div = document.getElementById('top');
            top_div.style.height = container_height / 2 + "px";
        });
    </script>
    <style type="text/css">
        div {
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
        }

        #container {
            width: 100%;
            height: 100%;
            border: solid black 1px;
            overflow: hidden;
        }

        #top {
            width 100%;
            min-height: 20%;
            max-height: 80%;
            resize: vertical;
            overflow: auto;
            border-bottom: solid black 1px;
            background-color: #333;
        }

        #bottom {
            width: 100%;
            height: 50%;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="top">
        Top
    </div>
    <div id="bottom">
        Bottom
    </div>
</div>
</body>
</html>
4

4 に答える 4

0

わかりました。下のdivのサイズを変更する関数を作成し、setTimeoutを使用して更新をポーリングすることで、質問の一部に対する答えを見つけました。さて、残っている唯一の質問は、Chromeが後で再びそのサイズよりも小さくなるのをブロックせずに、トップdivの高さを50％に変更するにはどうすればよいですか？

于 2013-03-25T16:20:01.760 に答える
0

トップdivの高さを設定しないでください。

削除する

top_div.style.height = container_height / 2 + "px";

下のdivの高さを100％に設定します

#bottom {
height:100%;
}

ページが読み込まれると、top divはmin-height（20％）になります。また、コンテンツの高さにも依存します。

于 2013-03-25T16:28:41.880 に答える
0

あなたがすべきことは、両方のdivに設定し、サイズ変更min-height時に、両方の高さの合計が常に100％になるように％を設定することです。max-heightheight

HTML

<div class="container">
  <div class="top_block"></div>
  <div class="bottom_block"></div>
</div>

CSS

div.container{ height: 100%; border: 1px solid salmon; }
div.container > div{ min-height: 20%; max-height: 80%; }
div.container > div.top_block{ height: 50%; background-color: lightgreen; }
div.container > div.bottom_block{ height: 50%; background-color: dodgerblue; }

ご覧のとおり、両方のdivの高さは最小20％から最大80％であり、これをで制御しますheight。

100％に設定すると、設定した最大値であるため、両方のdivの高さが80％になります。

最小値と同じように、高さを0％に設定すると、divの高さが20％になります。

オーバーフローは望ましくないため、上部のdivの高さが70％の場合、下部の高さが30％に設定されるように、javascriptを使用して高さの％を制御する必要があります。

お役に立てば幸いです。

于 2013-03-25T16:38:08.103 に答える
0

わかりました。html5とドラッグ可能を使用して、はるかに優れたソリューションを見つけました。

<html>
<head>
<script type="text/javascript">
    function update_size(ev) {
        ev.preventDefault();
        var top_div = document.getElementById('top');
        var bottom_div = document.getElementById('bottom');
        var left_height = document.getElementById('left').offsetHeight;
        var new_top_height = Math.floor(ev.clientY);
        var new_bottom_height = left_height - new_top_height - 4;
        top_div.style.height =  new_top_height + "px";
        bottom_div.style.height = new_bottom_height + "px";
    }

    function drop(ev) {
        ev.preventDefault();
        update_size(ev);
    }

    document.addEventListener("DOMContentLoaded", function () {
        var top_div = document.getElementById('top');
        var bottom_div = document.getElementById('bottom');
        var left_height = document.getElementById('left').offsetHeight;
        var new_top_height = Math.floor((left_height - 4) / 2);
        var new_bottom_height = left_height - new_top_height - 4;
        top_div.style.height =  new_top_height + "px";
        bottom_div.style.height = new_bottom_height + "px";
    });
</script>
<style type="text/css">
    body {
        margin: 0px;
    }

    div {
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }

    #container {
        width: 100%;
        height: 100%;
    }

    #left {
        width: 80%;
        height: 100%;
        float: left;
        clear: left;
    }

    #right {
        width: 20%;
        height: 100%;
        float: left;
        clear: right;
        border-left: solid black 1px;
    }

    #top {
        width 100%;
        height: 50%;
        overflow: auto;
        background-color: #333;
    }

    #seperator {
        width: 100%;
        height: 4px;
        background-color: black;
    }

    #bottom {
        width: 100%;
        height: 50%;
        overflow: auto;
        background-color: #ccc;
    }
</style>
</head>
<body>
<div id="container">
    <div id="left">
        <div id="top" ondrop="drop(event)" ondragover="update_size(event);">
            Top
        </div>
        <div id="seperator" draggable="true">
            &nbsp;
        </div>
        <div id="bottom" ondrop="drop(event)" ondragover="update_size(event);">
            Bottom
        </div>
    </div>
    <div id="right">
        Right
    </div>
</div>
</body>
</html>
于 2013-03-25T18:02:55.320 に答える