Question

如果我有一个宽度为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;
}

Answer 1

试试这个：

<div style="width:1225px; height:870px; padding-top:0px; margin-top:0px; overflow-x: scroll;">

overflow属性应该为您提供滚动条。

Answer 2

您可以尝试将此属性添加到body标记：

溢出 - X：汽车;

如何在缩小窗口时创建水平滚动条

2 个答案: