拉伸html对象并调整其大小以适应?
我正在制作一个页面,它将同时显示4个对象。这些对象将是流式实时视频,并在单击主菜单中的项目时动态分配。我需要的是帮助自动调整页面上的所有内容的大小,以便在不滚动的情况下尽可能地进行拉伸 黑框就是这一页。顶部的标题框始终具有相同的高度,左侧的框始终具有相同的宽度。但是,绿色框需要自动调整大小以尽可能适合,并且所有4个框的大小相同。除主菜单外,任何地方都不得有滚动条 最重要的是,当内容框调整大小时,对象也需要调整大小。我在IE中看到过这样的问题:宽度为“100%”的对象无法正常工作 如何构造此页面以实现此目的?我对HTML还是相当陌生,不知道如何设置它来调整大小。以下是我目前掌握的代码:拉伸html对象并调整其大小以适应?,html,css,resize,object-tag,Html,Css,Resize,Object Tag,我正在制作一个页面,它将同时显示4个对象。这些对象将是流式实时视频,并在单击主菜单中的项目时动态分配。我需要的是帮助自动调整页面上的所有内容的大小,以便在不滚动的情况下尽可能地进行拉伸 黑框就是这一页。顶部的标题框始终具有相同的高度,左侧的框始终具有相同的宽度。但是,绿色框需要自动调整大小以尽可能适合,并且所有4个框的大小相同。除主菜单外,任何地方都不得有滚动条 最重要的是,当内容框调整大小时,对象也需要调整大小。我在IE中看到过这样的问题:宽度为“100%”的对象无法正常工作 如何构造此页面
<!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>
这就是它现在的样子,我在它需要移动的地方画了线
使用
位置:绝对在绿色框上编码>并将其直接放入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宽度为100%的对象上的代码>代码>。更好的是,甚至不设置width:100%代码>在块元素上-块元素自然展开以水平填充其父元素。不要在所有内容上设置位置:相对。保留默认值(position:static
),仅在需要时设置position:relative
。就像在某些元素的父元素上一样,您希望绝对定位这些元素—您可能希望阅读本文
或其他版本:使用显示:表格代码>-演示使用位置:绝对在绿色框上编码>并将其直接放入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宽度为100%的对象上的代码>代码>。更好的是,甚至不设置width:100%代码>在块元素上-块元素自然展开以水平填充其父元素。不要在所有内容上设置位置:相对。保留默认值(position:static
),仅在需要时设置position:relative
。就像在某些元素的父元素上一样,您希望绝对定位这些元素—您可能希望阅读本文
或其他版本:使用显示:表格代码>-演示我现在了解了它的要点,但仍然无法做到完美,因为顶部的标题和左侧的菜单-他们正在丢弃测量值,事情正在被掩盖…我不确定我是否理解丢弃测量值指的是什么。我已经更新了我的答案,加入了另一种方法的演示。你能用这个来解释吗?用新的代码更新了问题-它似乎仍然没有延伸,它仍然取决于一个固定大小的页面…从contentbox中取出height:33%
-这有帮助吗?不,没有,仍然没有延伸我现在明白了要点,但仍然无法做到完美,因为顶部的标题和左侧的菜单-他们正在扔掉测量值,事情正在被掩盖…我不确定我是否理解扔掉测量值指的是什么。我已经更新了我的答案,加入了另一种方法的演示。你能用这个来解释吗?用新代码更新了问题-它似乎仍然没有延伸,而且仍然取决于一个固定大小的页面…从contentbox中取出高度:33%
-这有帮助吗?不,没有,仍然没有延伸