拉伸和调整html对象的大小以适应？
我正在制作一个页面，用于同时显示4个对象。这些对象将流式传输实时视频，并在单击主菜单中的项目时动态分配。我需要的是帮助自动调整页面上的所有内容，以便在不滚动的情况下尽可能地进行拉伸。
黑匣子是页面。顶部的标题框始终具有相同的高度，左侧的框始终具有相同的宽度。然而，绿色框需要自动调整大小以尽可能地适合，并且所有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>
更新
在尝试了Ana使用display: table;的答案后，我得到了更好的表现，但它现在仍在填补所有空间。页面也取决于主要的高度是800像素，我需要100％ - 由于标题div我无法弄清楚如何做，由于主菜单宽度相同。那么我如何A）确保页面在没有滚动条的情况下正确拉伸，以及B）如何用每个框填充其内容？
[PS - 这个新代码中将找不到图像，现在是3x3而不是2x2]
<!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>
这就是它现在的样子，我画了需要移动的线......
1 个答案:
答案 0 :(得分：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-positioining-how-do-they-differ/
或其他版本：使用display: table; - 演示http://dabblet.com/gist/2815688
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？