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

最新推荐文章于 2024-07-10 16:27:59 发布

原创最新推荐文章于 2024-07-10 16:27:59 发布 · 1.4w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍如何通过修改HTML样式来实现浏览器窗口缩小时，水平滚动条不显示的效果，并展示了调整前后网页布局的变化。通过设置宽度、最小宽度、最大宽度等属性，确保网页在不同设备上呈现良好视觉体验。

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

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

效果如下图：