【发布时间】：2020-10-20 12:45:36
【问题描述】：
我正在尝试创建一个网页并添加更多内容。我试图添加一个页脚，但它不会出现。到目前为止这是我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fedorfanpage</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 id="h1" >Fedor Emelianenko Fan page</h1>
<div class = "box1">
Fedor career highlights
<ul class = "ul.a">
<li>Pride Heavyweight Champion</li>
<li>Fias World Combat Sambo Champion</li>
<li>Russian Federation Judo National Champion</li>
<li>Wamma World Champion</li>
</ul>
</div>
<div class = "box2">
<p class="p1">
Fedor Vladimirovich Emelianenko, is widely regarded as the greatest mixed martial arts fighter of all time. Fedor was born in Rubizhne, which is the small town in the Ukrainian SSR, a former Soviet republic. He has two brothers and one sister, one of the brothers Alexander is also a mma fighter. Fedor nad his brother trained Sambo from a very young age. The two would pratice their throws four hours at a time. Later in life, Fedor went to school to pursue a trade and joined the army. In the Russian army, Fedor was a military firefighter and part of tank division. After Fedor had left the military, he joined the National team for Judo. There was no money in competing for the national team, so Fedor had to apply his skills elsewhere. In the year 2000, he had his first MMA fight for the rings organization and would go on to be their heavyweight champion.
</p>
</div>
<div class = "box3"><p1 class = "tag" >"The Last Emperor"</p1></div>
<div class = "box4"> <p2 class = "par2">This is the ultimate highlight video of Fedor Emelianenko's storied career. It shows some of first matches in Rings all the way through pride at the height of his career. It also shows some of his time when he came to America at the end.</p2><iframe class ="fedorhighlight" src="https://www.youtube.com/embed/5ivjn4zETUM"/>
</div>
<div class="foot1"> A page created by Colton Farbatuk, 2020. </div>
</body>
</html>
这是我的css
html{
position:relative;
min-height:100%;
}
#h1{
color:red;
font-family:"Brush script MT",cursive;
text-align:center;
padding:10px;
border:solid black;
background:white;
}
body
{
background-image:url(Russiaflagbackground.jpg);
width: 100%;
height: 100%;
background-size: cover;
}
.box1{
background-image:url(pride.jpg);
background-size:cover;
width:200px;
height:200px;
float:left;
padding:10px;
border:solid red;
font-family:'Times New Roman';
text-shadow: black 0px 0px 10px;
font-weight:bold;
color:crimson;
}
.box2{
width:600px;
height:250px;
padding:10px;
float:right;
border:solid red;
color:blueviolet;
background:white;
font-family:fantasy;
margin-right:250px;
}
.p1{
text-align:justify;
padding:10px;
}
.box3{
z-index:-1;
position:relative;
left:0px;
bottom:-300px;
height:250px;
width:200px;
border:solid red;
padding:10px;
background-image:url(fedormug.jpg);
background-size:cover;
}
ul.a{
list-style-type: square;
margin-left:0 px;
}
.tag{
position:relative;
text-align:justify;
color:black;
font-weight:bold;
left:15px;
}
.box4{
width:800px;
height:250px;
padding:10px;
position:relative;
border:solid red;
font-family:fantasy;
left: 456px;
bottom:-25px;
background:red;
float:left;
}
.par2{
color:white;
text-emphasis:bold;
float:right;
justify-content:right;
left:200px;
display:flex;
}
.fedorhighlight{
height:200px;
width:400px;
float:left;
overflow:auto;
}
.foot1{
position:absolute;
left:0px;
bottom:0px;
color:red;
border: solid black;
padding:10px;
margin:10px;
height:50 px;
width:100%;
text-align:center;
background-color:white;
}
所以我根本无法显示页脚，如果我将页脚移动到其中一个 div 内，那么如果我将其放置得足够远，它将起作用。有没有办法按照这里显示的那样做？
【问题讨论】：
标签： html css position footer visibility