【发布时间】：2018-12-21 16:42:03
【问题描述】：
我的网页上有照片横幅（一系列水平排列的照片），如果它们的宽度很长，我以前只能水平滚动浏览它们，底部会有一个滚动条清楚地指示网页很长。现在我在做其他事情的过程中删除了一些代码，但现在意识到照片横幅只是被网页本身的宽度/大小切断，底部不再有自然的滚动条。我想把它恢复到以前的样子。
我尝试使用html {overflow: scroll;} 在其中强制滚动条，但该网页上的滚动条只是“满”，即使照片横幅仍在向右转向。我还尝试将overflow: scroll; 或:auto; 添加到照片横幅本身，但效果不佳。而且，将width: 100%; 添加到html div 似乎没有任何作用。
这是我认为相关的CSS：
#container1 {
width: 4000px;
overflow: hidden;
margin: 100px auto;
background: none;
}
/*header*/
header1 {
width: 1800px;
margin: -400px;
}
header1 h1 {
text-align: justify;
font: 100 60px/1.5 roboto condensed;
}
header1 p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 8550px;
margin-left: -400px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
还有html：
<div id="container">
<div style="float: top;">
<div style="margin-top: -475px;">
<div class="photobanner"><img alt="" class="first" height="575" src="LINK"
/><img alt="" height="575" src="LINK" /><img alt="" height="575" src="LINK"
/><img alt="" height="575" src="LINK" /><img alt="" height="575" src="LINK"
/>
<p>___</p>
<h1>HEADER</h1>
<p>CATPION</p>
</div>
</div>
</div>
</div>
编辑（19 年 1 月 4 日）：好的，所以我通过临时擦除我的 HTML 的随机部分并查看发生了什么来进行测试。结果是当我删除了我计划在其中构建标题的代码时：
<body class='section-1'>
<div id='menu'>
<div class='container'>
<div align="center"><a href="https://terrichienyi.com/"><img src="https://66.media.tumblr.com/37c178aaab3ceab836b8136297132679/tumblr_pjqt2u
lQ8R1xmt4ilo5_1280.png"></a>
<a href="https://google.com/" target=blank><img
src="https://sc01.alicdn.com/kf/HTB1suoTg5qAXuNjy1Xdq6yYcVXaq/14inch-button-
interface-small-size-color-tv.jpg_50x50.jpg"></a><a
href="http://google.com/" target=blank><img
src="https://sc01.alicdn.com/kf/HTB1suoTg5qAXuNjy1Xdq6yYcVXaq/14inch-button-
interface-small-size-color-tv.jpg_50x50.jpg"></a><a
href="https://google.com/" target=blank><img
src="https://sc01.alicdn.com/kf/HTB1suoTg5qAXuNjy1Xdq6yYcVXaq/14inch-button-
interface-small-size-color-tv.jpg_50x50.jpg"></a><a
href="https://google.com/" target=blank><img
src="https://sc01.alicdn.com/kf/HTB1suoTg5qAXuNjy1Xdq6yYcVXaq/14inch-button-
interface-small-size-color-tv.jpg_50x50.jpg"></a><a
href="https://google.com/" target=blank><img
src="https://sc01.alicdn.com/kf/HTB1suoTg5qAXuNjy1Xdq6yYcVXaq/14inch-button-
interface-small-size-color-tv.jpg_50x50.jpg"></a><a
href="https://google.com/in/" target=blank><img
src="https://sc01.alicdn.com/kf/HTB1suoTg5qAXuNjy1Xdq6yYcVXaq/14inch-button-
interface-small-size-color-tv.jpg_50x50.jpg"></a><a
href="http://google.com/" target=blank><img
src="https://sc01.alicdn.com/kf/HTB1suoTg5qAXuNjy1Xdq6yYcVXaq/14inch-button-
interface-small-size-color-tv.jpg_50x50.jpg"></a><br />
</div>
照片横幅的问题神奇地自行解决了。谁能解释为什么会这样？这段文字中的什么突然阻止了我的网页屏幕滚动？我仍然想保留标题，同时又不必处理这个问题。
edit(1/11/2019)：将上面的 HTML 重新排序到整个 HTML 的不同部分也不起作用，有时它会打乱标题。只有删除它才能完全解决问题，但我想要一种方法让我的标题安全地保留并看起来与现在的方式相同。
【问题讨论】：
-
当您将
overflow: scroll添加到.photobanner时，它是什么“坏结果”？ -
@AndrewMorton 滚动条将直接放在照片下方而不是整个页面，更重要的是滚动条不会移动。
-
你是说页面的滚动条（即在浏览器窗口的底部）只滚动了照片横幅 div，其余的内容保持不变？
-
@AndrewMorton 不，我的意思是它根本不滚动，或者表明最右边甚至有内容。您知道如何根据页面的大小来拖动一个条（？）吗？好吧，即使我的照片横幅比电脑屏幕长，酒吧也完全填满了凹槽并且不会移动。