浏览器窗口小化时div相对位置不变

最新推荐文章于 2024-07-22 17:45:11 发布

在北京的小蜜蜂

最新推荐文章于 2024-07-22 17:45:11 发布

阅读量8.4k

点赞数 1

本文链接：https://blog.csdn.net/Jonia917/article/details/22747055

版权

无论浏览器的窗口怎么变化，div的相对位置不变，position:relative;父div定义这个，然后再去用绝对定位跟相对定位，子div就是跟着父div的左上角了，如果不事先定义的话，那绝对定位跟相对定位只能相对于body来定位了！这样，当窗口缩小时，所有的div排列正常！

<html>
<head>
<title>主页面</title>
<style>
body{
margin:0px;
width:1350px;
min-width:1024px;
max-width:100%;
height:100%;
background-color:#F0F0F0;
}
#head{
background-color:#FFFF00;
width:1350px;
height:100px;
min-width:1024px;
}
#center{
background-color:#00FFFF;
width:1350px;
min-height:100%;
position:relative;
min-width:1024px;
}
#foot{
background-color:#FF00FF;
width:1350px;
height:100px;
min-width:1024px;
}
#left{
width:150px;
height:100%;
background-color:#EEEEEE;
position:absolute;
margin-left:60px;
}
#main{
width:924px;
height:100%;
background-color:#EE00FF;
position:absolute;
margin-left:210px;
}
#right{
width:150px;
height:100%;
background-color:#EEFF00;
position:absolute;
margin-left:1134px;
}
</style>
</head>
<body>
<thead>
<div id="head">
你好
</div>
</thead>
<tbody>
<div id="center">
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</div>
</tbody>
<tfoot>
<div id="foot">大家好</div>
</tfoot>
</body>
</html>