Stretching and resizing html objects to fit?
https://stackoverflow.com/questions/10776512
-
11-06-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I'm making a page which is meant to show 4 objects at the same time. These objects will be streaming live video, and are assigned dynamically upon clicking items in the main menu. What I need is help for automatically resizing everything on the page to stretch to fit as much as possible without scrolling.
The black box is the page. The title box at the top is always the same height and the box on the left is always the same width. The green boxes however need to automatically resize to fit as much as possible and all 4 be the same size. There shall be no scroll bars anywhere, except in the main menu.
On top of that, when the content boxes resize, the objects also need to resize. I've seen issues in IE where an object at "100%" width doesn't work right.
How do I structure this page to do so? I'm still fairly new to HTML and don't know how to set it up to resize. Here's the code that I have so far:
<!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
After trying Ana's answer of using display: table; I got it to show better, but it's still now filling in all the space. The page also depends on the main div being 800 px in height, and I need this to be 100% - which I can't figure out how to do because of the title div, and same problem with the width due to the main menu. So how do I A) make sure the page stretches properly with no scroll bars, and B) how to fill in each box with their content?
[PS - there will be an image not found in this new code, and it's now 3x3 instead of 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>
This is how it is looking now, and I drew lines where it needs to move...
Solution
Use position: absolute; on the green boxes and put them directly into contentmain. And then position them like this:
#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%}
Also, don't use float:left; on objects that have width: 100%;. Even better, don't even set width:100%; on block elements - block elements naturally expand to fill their parent horizontally. Don't set position: relative on everything. Leave them with the default (position: static) and only set position: relative when you need it. Like on the parent of some elements that you want to have absolutely positioned - you might want to read this http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Or another version: using display: table; - demo http://dabblet.com/gist/2815688
