浏览器窗口缩小，水平滚动条自动显示出来

最新推荐文章于 2023-01-16 20:44:59 发布

在北京的小蜜蜂

最新推荐文章于 2023-01-16 20:44:59 发布

阅读量1.4w

点赞数 1

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

版权

最原始的代码：浏览器窗口缩小，水平滚动条不显示

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

效果如下图：

在北京的小蜜蜂

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
浏览器窗口缩小，水平滚动条自动显示出来

最原始的代码：浏览器窗口缩小，水平滚动条不显示主页面body{ margin:0px; width:100%; height:100%; background-color:#F0F0F0;}#head{ background-color:#FFFF00; width:100%; height:100px;}
复制链接

扫一扫