1. 首页
  2. 问答
  3. 拉伸和调整html对象的大小以适应？

拉伸和调整html对象的大小以适应？

2012-05-27 45 views
0

我正在制作一个页面，用于同时显示4个对象。这些对象将流式传输直播视频，并在单击主菜单中的项目时动态分配。我需要的是帮助自动调整页面上的所有内容，以便尽可能无需滚动即可进行调整。拉伸和调整html对象的大小以适应？

enter image description here

的黑盒子是页面。顶部的标题框始终是相同的高度，而左侧的框始终是相同的宽度。然而，绿色盒子需要自动调整大小以尽可能适合，并且所有4个尺寸都是相同的。除主菜单外，任何地方都不应有滚动条。

最重要的是，当内容框大小调整时，对象也需要调整大小。我在IE浏览器中看到“100％”宽度的对象无法正常工作的问题。

我该如何构建此页面才能做到这一点？我对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>

UPDATE

尝试使用display: table;我得到了它的显示效果更好的安娜的回答后，但它现在仍然在所有的空间填充。该页面也取决于主要的div是800像素的高度，我需要这是100％ - 我不知道该怎么做，因为标题div，和宽度相同的问题，由于主菜单。那么我该如何确保页面没有滚动条，以及B）如何在每个框中填充内容？

[PS - 会出现在这个新的代码没有找到一个图像，它现在是3×3的，而不是2×2]

<!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>

这是它是如何现在看，我画了线需要的地方移动...

enter image description here

来源

2012-05-27 Jerry Dodge

回答

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%}

另外，不要在有width: 100%;对象使用float:left;。更好的是，甚至不要在块元素上设置width:100%; - 块元素自然会展开以水平填充父元素。一切都不要设置position: relative。保留默认值（position: static），只在需要时设置position: relative。就像你希望有绝对定位的一些元素的父 - 你可能想读这http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

或者另一个版本：使用display: table; - 演示http://dabblet.com/gist/2815688

来源

2012-05-27 19:41:42 Ana

+0

现在我得到了它的要点，但仍然可以”由于顶部的标题和左侧的菜单使得它完美无缺 - 它们正在抛弃测量并且事物正在被掩盖...... –

+0

我不确定我理解抛弃测量是指什么。我已经更新了我的答案，以包含另一种方法的演示。你能用那个来解释吗？ – Ana

+0

+1你的第二个替代作品，用'display：table;' –

相关问题

 相关问题