使用Table将各个控件进行定位,如下:<table>
<tr>
<td>
<div>div1</div>
</td>
<td>
<div>div2<div>
<div>div3<div>
</td>
</tr>
</table>要实现div1高度100%,宽度50%,div2、div3高度各是50%,宽度50%
要求页面不出现滚动条,随浏览器大小更改高宽。td中的不一定是div,也可能是其它元素(如文本框、frame等)我需要的最终效果大致是:
写一个公用的函数,传递一个参数,参数是一个JSON数组,每一个元素具有:
id(控件id),height(传递一个百分比数), width(传递一个百分比数)
然后在页面的onresize中调用这个函数,实现各个控件的自动调整大小。
要注意浏览器的边距,控件之间也可能存在margin不知道讲清楚了没有,我搞了几天都没有达到想要的效果。拜托各位了!!
<tr>
<td>
<div>div1</div>
</td>
<td>
<div>div2<div>
<div>div3<div>
</td>
</tr>
</table>要实现div1高度100%,宽度50%,div2、div3高度各是50%,宽度50%
要求页面不出现滚动条,随浏览器大小更改高宽。td中的不一定是div,也可能是其它元素(如文本框、frame等)我需要的最终效果大致是:
写一个公用的函数,传递一个参数,参数是一个JSON数组,每一个元素具有:
id(控件id),height(传递一个百分比数), width(传递一个百分比数)
然后在页面的onresize中调用这个函数,实现各个控件的自动调整大小。
要注意浏览器的边距,控件之间也可能存在margin不知道讲清楚了没有,我搞了几天都没有达到想要的效果。拜托各位了!!
解决方案 »
- 当前a页面如何获取design页面的frameset的frame
- js实现图片从左边移动出来显示在页面上
- 怎么会有这种写法呢,是什么意思啊
- 一个关于keypress时间在firefox里面用的问题
- 急求!!! 如何用javascript给控件(input)赋值? (已经试过一些方法, 不成功)
- 声音文件顺序播放问题
- 如何使用JAVASCRIPT得到浏览器history的列表的各个网址(100分)
- 怎样制作例如 http://www.tunnel.net.cn/oa.gif左边的导航菜单
- 请教JS版的大侠 在FF浏览器中如何提交表单啊?谢谢啦
- fullCalendar日历插件中一个时间段只能有一个事件
- setTimeOut 和setInterval有何区别
- 我觉得不通顺啊 先发后等吧
function RedirectPage() {
var table = document.getElementById("Table-data");
var menu = document.getElementById("Table-menu");
var h = screen.height
var str = 1;
if (h > 768) {
table.style.height = (705 + (1024 - h) * (-1)).toString();
menu.style.height = (746 + (1024 - h) * (-1)).toString();
}
else if (h < 768) {
table.style.height = (705 - (1024 - h)).toString();
menu.style.height = (746 - (1024 - h)).toString();
}
else {
table.style.height = "450px";
menu.style.height = "491px";
}
}把你数字改成你想要的就可以了,另外getElementById是标签的ID,自己对应修改,你标签的ID就好了
div2、div3高度各是50%
div1在第一列中,div2和div3在第二列中。
td的高度呢?宽度呢?table的高度宽度呢~~
布局问题~~看你具体需求~~~
<!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>无标题文档</title>
<style type="text/css">
body,html
{
overflow:auto;
height:100%;
}
body
{
margin:0px;
padding:0px;
}
.layoutGrid
{
height:100%;
width:100%;
border-collapse:collapse;
}
</style>
</head><body>
<table class="layoutGrid">
<tr>
<td style="height:100%; padding:0px; width:50%;">
<div style="background-color:#F0F0F0;height:100%">div1</div>
</td>
<td style="height:100%; padding:0px; width:50%">
<div style="background-color:#F0FFF0;height:50%">div2</div>
<div style="background-color:#FFF0F0;height:50%">div3</div>
</td>
</tr>
</table>
</body>
</html>
<div style="height:50%;background-color:#ccc;">
head
</div>
<div style="width:100%;height:50%;">
<div style="float:left;width:50%;background-color:green;display:block;height:100%;">
left
</div>
<div style="margin-left:50%;;height:100%;">
right
</div>
</div>
</BODY>