您的位置：首页 > Web前端 > HTML

HTML布局动态随窗口变化

2014-03-12 22:07 183 查看

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>

<title>HTML布局随窗口动态变化</title>

</head>

<script>

$(function(){

resizeGolbalBody();

$(window).resize(function(){

resizeGolbalBody();

});

});

function resizeGolbalBody(){

var width=window.innerWidth-20;

var height=window.innerHeight-20;

width<1388?width=1388:width=width;

height<900?height=900:height=height;

$("#container").css({width:width+"px",height:height+"px"});

}

</script>

<style>

#container{

background-color:#09F;

box-shadow:0 0 5px #000;

border-radius:10px;

text-align:center;

margin:0px auto;

}

#header{

border:none;

width:100%;

height:10%;

float:left;

}

#main{

width:100%;

height:80%;

clear:both;

}

#m_left{

background-color:#CCC;

width:15%;

height:auto;

float:left;

margin-left:4px;

}

#m_body{

background-color:#FFF;

width:84%;

height:100%;

float:left;

margin-left:4px;

}

#footer{

width:100%;

height:10%;

float:left;

}

</style>

<body>

<div id="container">

<div id="header">

<p>前端技术</p>

</div>

<div id="main">

<div id="m_left">

<ul>

<li><a href="#">系统工程</a></li>

<li><a href="#">外国语言</a></li>

<li><a href="#">科学技术</a></li>

</ul>

</div>

<div id="m_body">

<iframe src="http://www.51cto.com" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>

</div>

</div>

<div id="footer">

<p>版本所有周正德——前端技术</p>

</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航