注意:
页面不会随着屏幕大小的改变而移动位置,而是正常的大小伸缩,在布局时要注意清除浮动的影响,用 clear: both清除兄弟元素之间的影响,用overflow: hidden清除父子元素之间的影响,注意,overflow: hidden放在父元素的样式设置中。
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 500px;
}
#header,
#footer {
width: 100%;
height: 100px;
line-height: 100px;
background-color: rgb(228, 222, 198);
}
#footer {
clear: both;
}
#content {
padding-left: 200px;
padding-right: 150px;
overflow: hidden;
}
.com {
float: left;
height: 500px;
/* position: relative; */
}
#left {
width: 200px;
margin-left: -200px;
background-color: rgb(161, 241, 241);
}
#main {
width: 100%;
background-color: rgb(243, 236, 236);
}
#right {
width: 150px;
margin-right: -150px;
background-color: rgb(161, 241, 241);
}
</style>
<body>
<div id="header"></div>
<div id="content">
<div id="left" class="com"></div>
<div id="main" class="com"></div>
<div id="right" class="com"></div>
</div>
<div id="footer"></div>
</body>