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

【问题标题】：How to create a horizontal scroll bar when shrinking the window缩小窗口时如何创建水平滚动条
【发布时间】：2013-06-14 15:02:12
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

您可以尝试将此属性添加到正文标签：

溢出-x:auto;

【讨论】：

这行得通，但是现在当我缩小宽度时，我的图像正在缩小，所以我可以在页面右侧看到一条主体的背景色 (#ADCCEB)
那是因为您将 width:100% 应用于 img 标签，请尝试删除该属性并将其替换为以像素为单位的宽度。

【解决方案2】：

试试这个：

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

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

【讨论】：