我正在尝试创建这个时间轴来告诉人们涂鸦艺术。我有一个问题，我无法缩短我的页面，它会让我向下滚动到虚无。这是仅包含 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 现在看起来不错。此外，我认为 body 和 ul 中的 max-height: 3000px 不再是必需的。
@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>关于HTML/CSS - 时间线使页面太长且有空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55055753/