如果我有一个宽度为 1225px 的内容区域，我该如何制作，以便当您将页面缩小到小于该宽度时，会出现一个水平滚动条，以便始终可见中心内容（至少可以选择滚动)? 它会涉及使用固定定位还是绝对定位？
在这个站点中，你可以看到当你缩小页面时，出现了水平滚动条： http ://www.websitecodetutorials.com/
我不知道它是否有帮助，但这是我的一些代码：
<body class="fullbackground">
<img class="fullbackground" src="background.png" />
<div class="topbackground">
<div class="top">
<div class="topleft">
<img class="pf_logo" src="pathfinder_logo.png"/>
</div>
<div class="topmiddle">
<h1 class="title">Pathfinder is Temporarily Unavailable</h1>
</div>
<div class="topright" ></div>
</div>
</div>
<div class="bar"></div>
<div style="width:1225px; height:870px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto;">
<div class="contentcontainer">
我使用了 CSS 重置。这是我的一些CSS：
.bar {
background-color:#365C8C;
height:30px;
width:auto;
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
overflow-x:hidden;
}
body {
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
overflow-x:hidden;
height:100%;
width:100%;
background-color:#ADCCEB;
/*background-color:black;*/
/*background: url(background.png);*
/*background-size:100%;*/
}
.bold {
font-weight:bold;
}
.contentcontainer {
width:825px;
height:870px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
.extcontentcontainer {
width:825px;
height:645px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
img.fullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
img.extfullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}