如果我有一个宽度为 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;
}
最佳答案
您可以尝试将此属性添加到 body 标记中:
溢出-x:自动；
关于html - 如何在缩小窗口时创建水平滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17111507/