最原始的代码：浏览器窗口缩小，水平滚动条不显示
<html>
<head>
<title>主页面</title>
<style>
body{
margin:0px;
width:100%;
height:100%;
background-color:#F0F0F0;
}
#head{
background-color:#FFFF00;
width:100%;
height:100px;
}
#center{
background-color:#00FFFF;
width:100%;
min-height:100%;
}
#foot{
background-color:#FF00FF;
width:100%;
height:100px;
}
</style>
</head>
<body>
<thead>
<div id="head">你好</div>
</thead>
<tbody>
<div id="center">我好</div>
</tbody>
<tfoot>
<div id="foot">大家好</div>
</tfoot>
</body>
</html>
效果如下图：
调整之后的代码如下：
<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:100%;
height:100px;
}
#center{
background-color:#00FFFF;
width:100%;
min-height:100%;
}
#foot{
background-color:#FF00FF;
width:100%;
height:100px;
}
</style>
</head>
<body>
<thead>
<div id="head">你好</div>
</thead>
<tbody>
<div id="center">我好</div>
</tbody>
<tfoot>
<div id="foot">大家好</div>
</tfoot>
</body>
</html>
效果如下图：
