0

同時に 4 つのオブジェクトを表示するためのページを作成しています。これらのオブジェクトはライブ ビデオをストリーミングし、メイン メニューの項目をクリックすると動的に割り当てられます。私が必要としているのは、ページ上のすべてのものを自動的にサイズ変更して、スクロールせずにできるだけ収まるように伸ばすための助けです。

ここに画像の説明を入力

黒いボックスはページです。上部のタイトル ボックスは常に同じ高さで、左側のボックスは常に同じ幅です。ただし、緑色のボックスは、できるだけ収まるように自動的にサイズ変更する必要があり、4 つすべてが同じサイズになります。メインメニューを除いて、スクロールバーはどこにもありません。

さらに、コンテンツ ボックスのサイズが変更されると、オブジェクトもサイズ変更する必要があります。「100%」幅のオブジェクトが正しく機能しない IE の問題を見てきました。

そのためには、このページをどのように構成すればよいですか? 私はまだHTMLにかなり慣れていないので、サイズを変更するように設定する方法がわかりません. これが私がこれまでに持っているコードです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>View Cameras</title>
    <script type="text/javascript" language="javascript">

        function pageload() {
            //dynamically load main menu
        }

        function camload(addr) {
            var i = document.getElementById("selPosition").selectedIndex + 1;
            var h = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="100%" height="100%" id="vlc" events="True">';
                h += '<param name="Src" value="'+addr+'" />';
                h += '<param name="ShowDisplay" value="True" />';
                h += '<param name="AutoLoop" value="False" />';
                h += '<param name="AutoPlay" value="True" />';
                h += '<embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="100%" height="100%"';
                h += '  target="' + addr + '" ></embed></OBJECT>';
            document.getElementById('divContent' + i).innerHTML = h;
        }
    </script>
    <style type="text/css">
        body 
        {
            position: relative;
            float: left;
            width: 100%;
            height: 100%;
        }
        h1
        {
            margin: 0px;
            border: 0px;
            padding: 0px;
        }
        div.title
        {
            position: relative;
            float: left;
            width: 100%;
            height: 40px;
            overflow: hidden;
        }
        div.main
        {
            position: relative;
            float: left;
            width: 100%; height: 100%;
        }
        div.contentmain
        {
            position: relative;
            float: left;
            width: 1000px;
            height: 100%;
        }
         div.contentbox
        {
            position: relative;
            float: left;
            width: 50%;
            height: 100%;
        }
    </style>
</head>
<body onload="pageload()">
    <div id="divTitle" class="title">
        <h1>View Cameras</h1>
    </div>
    <div id="divMain" class="main">
        <div style="width: 250px; height: 600px; position: relative; float: left;">
            <div>
                <select id="selPosition" name="selPosition">
                    <option>Top Left</option>
                    <option>Top Right</option>
                    <option>Bottom Left</option>
                    <option>Bottom Right</option>
                </select>
            </div>
            <div>
                <ul>
                    <li><a href="javascript:" onclick="camload('rtsp://192.168.1.1')">Item l 1</a></li>
                    <li><a href="javascript:" onclick="camload('rtsp://192.168.1.2')">Item 2</a></li>
                </ul>
            </div>
        </div>
        <div class="contentmain">
            <div style="position: relative; float: left; width: 100%; height: 50%;">
                <div class="contentbox" id="divContent1">
                    <br />
                </div>
                <div class="contentbox" id="divContent2">
                    <br />
                </div>
            </div>
            <div style="position: relative; float: left; width: 100%; height: 50%;">
                <div class="contentbox" id="divContent3">
                    <br />
                </div>
                <div class="contentbox" id="divContent4">
                    <br />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

アップデート

Ana の使用の回答を試した後display: table;、よりよく表示されるようになりましたが、まだすべてのスペースを埋めています。ページは、高さが 800 ピクセルのメイン div にも依存します。これを 100% にする必要があります。 . では、どのように IA) ページがスクロール バーなしで適切に引き伸ばされていることを確認し、B) どのように各ボックスにコンテンツを入力するのでしょうか?

[追伸 - この新しいコードには見つからない画像があり、現在は 2x2 ではなく 3x3 です]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>View Cameras</title>
    <script type="text/javascript" language="javascript">
        var selIndex = 0;

        function selBox(index) {
            document.getElementById('b' + selIndex).style.backgroundColor = "White";
            selIndex = index;
            document.getElementById('b' + selIndex).style.backgroundColor = "Blue";
        }

        function pageload() {
            selBox(0);
            camload('');
            selBox(1);
            camload('');
            selBox(2);
            camload('');
            selBox(3);
            camload('');
            selBox(4);
            camload('');
            selBox(5);
            camload('');
            selBox(6);
            camload('');
            selBox(7);
            camload('');
            selBox(8);
            camload('');
            selBox(0);
        }

        function camload(addr) {
            var h = '';
            if (addr == '') {
                h = '<div style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">';
                h += '  <img src="Cam.jpg" alt="No Camera Selected"';
                h += '</div>';
            } else {
                h = '<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" id="player'+selIndex+'" events="True">';
                h += '<param name="Src" value="' + addr + '" />';
                h += '<param name="ShowDisplay" value="True" />';
                h += '<param name="AutoLoop" value="False" />';
                h += '<param name="AutoPlay" value="True" />';
                h += '<embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no"';
                h += '  target="' + addr + '" ></embed></OBJECT>';
            }
            document.getElementById('divContent' + selIndex).innerHTML = h;
        }
    </script>
    <style type="text/css">
        body 
        {
            position: absolute;
            padding: 10px;
            width: 100%;
            height: 100%;
        }
        h1
        {
            margin: 0px;
            border: 0px;
            padding: 0px;
        }
        h3
        {
            margin: 0px;
            border: 0px;
            padding: 0px;
            font-size: 14px;
            font-weight: bold;
        }
        div.title
        {
            height: 40px;
            overflow: hidden;
        }
        div.main
        {
            position: relative;
            height: 800px;
        }
        div.contentmain
        {
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        div.side
        {
            width: 250px;
            height: 100%;
            float: left;
            background: lightgrey;
        }
        .matrix
        {
            display: table;
            width: 100%;
            height: 100%;
        }
        .row 
        {
            display: table-row;
            width: 100%;
            height: 33%;
        }
        div.contentbox
        {
            display: table-cell;
            width: 33%;
            height: 33%;
        }
        table.selecttable
        {
            width: 200px;
            height: 100%;
        }
        td.selecttable
        {
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body onload="pageload()">
    <div id="divTitle" class="title">
        <h1>View Cameras</h1>
    </div>
    <div id="divMain" class="main">
        <div class="side">
            <h3>1) Click box to select view:</h3>
            <div style="position: relative; float: left; width: 100%;">
                <table class="selecttable" border="1px">
                    <tr>
                        <td class="selecttable" id="b0" onclick="selBox(0);">0<br /></td>
                        <td class="selecttable" id="b1" onclick="selBox(1);">1<br /></td>
                        <td class="selecttable" id="b2" onclick="selBox(2);">2<br /></td>
                    </tr>
                    <tr>
                        <td class="selecttable" id="b3" onclick="selBox(3);">3<br /></td>
                        <td class="selecttable" id="b4" onclick="selBox(4);">4<br /></td>
                        <td class="selecttable" id="b5" onclick="selBox(5);">5<br /></td>
                    </tr>
                    <tr>
                        <td class="selecttable" id="b6" onclick="selBox(6);">6<br /></td>
                        <td class="selecttable" id="b7" onclick="selBox(7);">7<br /></td>
                        <td class="selecttable" id="b8" onclick="selBox(8);">8<br /></td>
                    </tr>
                </table>
            </div>
            <h3>2) Select cam to show in selected box:</h3>
            <div style="position: relative; float: left; width: 100%;">
                <ul>
                    <li><a href="javascript:" onclick="camload('')">[ NONE ]</a></li>
                    <li><a href="javascript:" onclick="camload('rtsp://192.168.1.2')">Item 1</a></li>
                    <li><a href="javascript:" onclick="camload('rtsp://192.168.1.2')">Item 2</a></li>
                </ul>
            </div>
        </div>
        <div class="contentmain">
            <div class="matrix">
                <div class="row">
                    <div class="contentbox" id="divContent0"></div>
                    <div class="contentbox" id="divContent1"></div>
                    <div class="contentbox" id="divContent2"></div>
                </div>
                <div class="row">
                    <div class="contentbox" id="divContent3"></div>
                    <div class="contentbox" id="divContent4"></div>
                    <div class="contentbox" id="divContent5"></div>
                </div>
                <div class="row">
                    <div class="contentbox" id="divContent6"></div>
                    <div class="contentbox" id="divContent7"></div>
                    <div class="contentbox" id="divContent8"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

今はこんな感じで、動かしたいところに線を引いたのですが…

ここに画像の説明を入力

4

1 に答える 1

5

緑色のボックスで使用position: absolute;し、それらを contentmain に直接配置します。そして、次のように配置します。

#divContent1 {top:0;left:0;bottom:50%;right:50%}
#divContent2 {top:50%;left:0;bottom:100%;right:50%}
#divContent3 {top:0;left:50%;bottom:50%;right:100%}
#divContent4 {top:50%;left:50%;bottom:100%;right:100%}

float:left;また、を持つオブジェクトには使用しないでくださいwidth: 100%;。さらに良いことに、ブロック要素を設定しないでくださいwidth:100%;。ブロック要素は、親を水平方向に埋めるために自然に拡張されます。position: relativeすべてを設定しないでください。デフォルト ( ) のままにし、必要な場合にposition: staticのみ設定します。position: relative絶対に配置したいいくつかの要素の親のように-これを読みたいかもしれませんhttp://css-tricks.com/absolute-relative-fixed-positionioining-how-do-they-differ/

または別のバージョン: 使用display: table;- デモhttp://dabblet.com/gist/2815688

于 2012-05-27T19:41:42.720 に答える