我正在尝试创建这个时间表，告诉人们涂鸦艺术。我有一个问题，我不能缩短我的页面，它会让我向下滚动到虚无。这是只有CSS和HTML的代码。
编辑：这是一个关于我的问题的Gif，我试图删除时间轴：3000px，但它只适用于片段，不适用于Dreamweaver。我试图在Chrome和Firefox上运行
@charset "utf-8";
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
height: 3000px;
}
body {
max-height: 3000px;
}
ul {
max-height: 3000px;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 22px;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4;
}
.timeline-badge.success {
background-color: #3f903f;
}
.timeline-badge.warning {
background-color: #f0ad4e;
}
.timeline-badge.danger {
background-color: #d9534f;
}
.timeline-badge.info {
background-color: #5bc0de;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-body {
text-align: left;
margin: 0px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.timeline-panel .timeline-body .img-responsive {
padding-top: 5px;
}
@media screen and (max-width:768px){
#closer1 {
top: -200px;
}
#closer2 {
top: -200px;
}
#closer3 {
top: -200px;
}
#closer4 {
top: -200px;
}
#closer5 {
top: -200px;
}
#closer6 {
top: -200px;
}
#closer7 {
top: -200px;
}
}<body>
<div class="container">
<div class="page-header">
<h1 id="timeline">History</h1>
</div>
<ul class="timeline">
<li>
<div class="timeline-badge">1970</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>n modern times, paint (particularly spray paint) and marker pens have become the most commonly used graffiti materials. </p>
</div>
</li>
<li class="timeline-inverted" id="closer">
<!--<div class="timeline-badge warning"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>A train full with what consider vandalism at that time.</p>
</div>
</div>
</li>
<li id="closer1">
<!--<div class="timeline-badge danger"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>In most countries, marking or painting property without the property owner's permission is considered defacement and vandalism, which is a punishable crime</p>
</div>
</div>
</li>
<li class="timeline-inverted" id="closer2">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">1970s</h4>
</div>
<div class="timeline-body">
<p>Soon art galleries in New York began buying graffiti but it was around that time when John Lindsey, the mayor of New York at that time, declared the first war on graffiti in 1972. A few die-hard artists refused to be beaten and kept the art form alive during this period.</p>
</div>
</div>
</li>
<li id="closer3">
<div class="timeline-badge info">1980</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>Graffiti is considered one of the four elements of hip-hop (along with emceeing, DJing, and B-Boying). Graffiti is a central part of this subculture. The origins of all of these can be traced to the Bronx, in New York City.</p>
</div>
</div>
</li>
<li class="timeline-inverted" id="closer4">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Modern graffiti</h4>
</div>
<div class="timeline-body">
<p>On top of the political aspect of graffiti as a movement, political groups and individuals may also use graffiti as a tool to spread their point of view.</p>
</div>
</div>
</li>
<li id="closer5">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Banksy's work</h4>
</div>
<div class="timeline-body">
<p>Banksy displays his art on publicly visible surfaces such as walls and self-built physical prop pieces.</p>
</div>
</div>
</li>
<li class="timeline-inverted in" id="closer6">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Another Banksy works</h4>
</div>
<div class="timeline-body">
<p>Both Mickey Mouse and Ronald McDonald are two family-friendly faces of American capitalism, the same country that dropped Napalm on Vietnam</p>
</div>
</div>
</li>
<li id="closer7">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lady Pink</h4>
</div>
<div class="timeline-body">
<p>Lady Pink was born in Ecuador, raised in NYC and currently resides in the countryside north of the city</p>
</div>
</div>
</li>
</ul>
</div>
</body>如您所见，我尝试通过在body和container中使用max-height来减小页面的高度。但它只是没有用。先感谢您！
.timeline {
height: 3000px;
}
这就是问题。我删除了height: 3000px，现在看起来很好。另外我不认为max-height: 3000px和body中的ul是必要的。
@charset "utf-8";
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
body {
}
ul {
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 22px;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4;
}
.timeline-badge.success {
background-color: #3f903f;
}
.timeline-badge.warning {
background-color: #f0ad4e;
}
.timeline-badge.danger {
background-color: #d9534f;
}
.timeline-badge.info {
background-color: #5bc0de;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-body {
text-align: left;
margin: 0px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.timeline-panel .timeline-body .img-responsive {
padding-top: 5px;
}
@media screen and (max-width:768px){
#closer1 {
top: -200px;
}
#closer2 {
top: -200px;
}
#closer3 {
top: -200px;
}
#closer4 {
top: -200px;
}
#closer5 {
top: -200px;
}
#closer6 {
top: -200px;
}
#closer7 {
top: -200px;
}
}<body>
<div class="container">
<div class="page-header">
<h1 id="timeline">History</h1>
</div>
<ul class="timeline">
<li>
<div class="timeline-badge">1970</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>n modern times, paint (particularly spray paint) and marker pens have become the most commonly used graffiti materials. </p>
</div>
</li>
<li class="timeline-inverted" id="closer">
<!--<div class="timeline-badge warning"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>A train full with what consider vandalism at that time.</p>
</div>
</div>
</li>
<li id="closer1">
<!--<div class="timeline-badge danger"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>In most countries, marking or painting property without the property owner's permission is considered defacement and vandalism, which is a punishable crime</p>
</div>
</div>
</li>
<li class="timeline-inverted" id="closer2">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">1970s</h4>
</div>
<div class="timeline-body">
<p>Soon art galleries in New York began buying graffiti but it was around that time when John Lindsey, the mayor of New York at that time, declared the first war on graffiti in 1972. A few die-hard artists refused to be beaten and kept the art form alive during this period.</p>
</div>
</div>
</li>
<li id="closer3">
<div class="timeline-badge info">1980</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>Graffiti is considered one of the four elements of hip-hop (along with emceeing, DJing, and B-Boying). Graffiti is a central part of this subculture. The origins of all of these can be traced to the Bronx, in New York City.</p>
</div>
</div>
</li>
<li class="timeline-inverted" id="closer4">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Modern graffiti</h4>
</div>
<div class="timeline-body">
<p>On top of the political aspect of graffiti as a movement, political groups and individuals may also use graffiti as a tool to spread their point of view.</p>
</div>
</div>
</li>
<li id="closer5">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Banksy's work</h4>
</div>
<div class="timeline-body">
<p>Banksy displays his art on publicly visible surfaces such as walls and self-built physical prop pieces.</p>
</div>
</div>
</li>
<li class="timeline-inverted in" id="closer6">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Another Banksy works</h4>
</div>
<div class="timeline-body">
<p>Both Mickey Mouse and Ronald McDonald are two family-friendly faces of American capitalism, the same country that dropped Napalm on Vietnam</p>
</div>
</div>
</li>
<li id="closer7">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lady Pink</h4>
</div>
<div class="timeline-body">
<p>Lady Pink was born in Ecuador, raised in NYC and currently resides in the countryside north of the city</p>
</div>
</div>
</li>
</ul>
</div>
</body>所以过了一会儿我发现自己是什么问题。问题是：1 / .timeline这是父，位置是相对的。我将此最大高度设置为3000px 2 /我为每个#closer设置的高度越来越大，它们也是相对的。 （每个-200px）
由于这两件事，我不小心将我的身高扩大了
之所以我之前没有注意到这一点，是因为在我的原始文件中，我为＃closer1设置了-400px而＃close2设置为-800px。然而，这会将我的总时间轴高度扩展到超过（3000px）。这是导致我的页面比以前更长的原因。
所以，是的，当我删除max-height并将每个#closer更改为-200px时，它是有效的
感谢@lnhtmn的解决方案