老实说，当我把位置从相对位置改为绝对位置时，我不确定发生了什么。我的大部分元素已经是绝对的了。但是更改页眉、页脚和主要部分会打乱高度和可见性。我不知道该怎么办。我甚至不知道该寻找什么[解决方案]，所以Stack Overflow是我的最后手段。
我的网站供参考：https://rosesystem.neocities.org/index.html
无论我输入的%值是多少，页脚和主框的高度都不会改变。
CSS和HTML:
background-image:url(Backgrounds/roses.gif);
Font-family: "Courier New", monospace;
}
.all {
margin-left: 25%;
margin-right: 25%;
margin-top: 2%;
align-items: center;
align-content: center;
justify-content: center;
height: 110%;
position: relative;
}
a {
color: red;
text-decoration: none;
}
a:hover {
color: darkred;
}
#top {
color: white;
justify-content: center;
font-size: 35px;
background-image:url(Backgrounds/rouge.JPG);
background-position: center;
background-size: fill;
border: 4px red solid;
display: flex;
align-items: center;
align-content: center;
padding: 5px;
width: 100%;
animation: mymove 5s infinite;
position: absolute;
}
#booty {
background-image:url(https://64.media.tumblr.com/6382d38a81b616031c469d56a09d88b4/7faacc6c2b3eb254-76/s500x750/fe9ff85c4a3590a3701990dd6182b40706df862e.gifv); /*background*/
color: white; font-size:20px; /*text*/
border: 4px red solid; /*border*/
justify-content: center; align-items: center; align-content: center; /*content position*/
padding-top: 20px; margin-top: 12.5%!important; margin-bottom: 1%; margin: 20%; position: absolute; /*container position*/
padding: 5px; width: 60%; height: 200%; /*dimensions*/
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {border-color: red;}
50% {border-color: darkred;}
100% {border-color: red}
}
#feet {
background-image:url(Backgrounds/rouge.JPG);
color: white; font-size: 20px;
Border: 4px red solid;
Padding: 5px; width: 60%; height: 100%;
margin-top: 85%!important;margin-bottom: 5%!important; margin: 20%; /*container position*/
animation: mymove 5s infinite;
position: absolute;
}
.sidebar {
Border: 4px red solid;
animation: mymove 5s infinite;
background-color: black;
height: 100%
float: left;
margin-left: none;
margin-right: 82%!important;
overflow: hidden;
margin-top: 12.5%;
position: absolute;
left: 0;
top: 0;
padding: 5px;
padding-top: 20px!important;
align-items: center;
align-content: center;
justify-content: center;
}
.sidebar a {
display: block;
padding-top: 10px;
font-size: 20px;
background-color: #540101;
}
#otherside {
background-color: black;
color: white; font-size: 20px;
Border: 4px red solid; Padding: 5px;
position: absolute;
animation: mymove 5s infinite;
margin-left: 84% ;
width: 16.2%;
margin-top: 12.5%;
height: 100%;
}
#othersidetext {
background-color: #540101;
text-align: center;
color: red;
}
#othersideimg {
Border: 4px red solid;
height: auto; width: 93%;
animation: mymove 5s infinite;
margin-top: 4.5%;
}
#countbox {
background-image:url(Backgrounds/rouge.JPG);
color: white; font-size: 20px;
Border: 4px red solid; Padding: 5px;
position: absolute;
animation: mymove 5s infinite;
margin-left: 84%;
width: 16.2%;
margin-top: 49.5%;
height: 7%;
}
#blinkiebox {
background-color: black;
color: white; font-size: 20px;
Border: 4px red solid; Padding: 5px;
position: absolute;
animation: mymove 5s infinite;
margin-left: 84%;
width: 16.2%;
margin-top: 38.7%;
height: 35%;
overflow: hidden;
}
#blinkies {
width: 103%;
margin-left: 84%;
height: auto;
}
hr {
border-color: red;
border-style: solid;
border-width: 2px;
width: 106%;
margin-left: -5%;
animation: mymove 5s infinite;
}
</style>
<body>
<!-- everything box -->
<div class="all">
<!-- title box -->
<div id="top"> The Rose System </div>
<!-- main box -->
<div id="booty">
yes i'm redoing the index page again shh<br>
test<br>test<br>ok<br>now<br>here<br>Is<br>placeholder<br>text<br>i<br>hope<br>you<br>enjoy<br>
<img src="Roses/groupofroses.gif" alt="group of pretty roses with a butterfly" width="40%" height="auto"><br>
</div>
<!-- footer box -->
<div id="feet"> <marquee> || site by achrya || Feb 2022-Forever ||</marquee> </div>
<!-- sidebar box -->
<div class="sidebar">
<img src="Roses/groupofroses.gif" alt="group of pretty roses with a butterfly" width="75%" height="auto">
<hr>
<img src="Roses/rosedivider2.GIF" alt="horizontal rose vine that divides a section" width="97%" height="auto">
<hr>
<a href="Ialterlist.html">Alter List</a>
<hr>
<a href="Iblog.html">Blog</a>
<hr>
<a href="Igeneral">General [TW: Flashing]</a>
<hr>
<a href="Ilinks.html">Links</a>
<hr>
<img src="Roses/rosedivider2.GIF" alt="horizontal rose vine that divides a section" width="97%" height="auto" padding-bottom="15px">
<hr>
<img src="Roses/groupofroses.gif" alt="group of pretty roses with a butterfly" width="75%" height="auto">
</div>
<!-- image box -->
<div id=otherside>
<div id="othersidetext"> Zombie: </div>
<hr>
<img src="https://c.tenor.com/8ustcfbXeAcAAAAM/anime-excited.gif" id="othersideimg" alt="a gif of the system host, zombie. from one of her source medias">
</div>
<!-- count box -->
<div id="countbox">Alter Count: 13?</div>
<!-- Blinkie Box -->
<div id="blinkiebox">
<a href="http://users3.smartgb.com/g/g.php?a=s&i=g36-33616-af%22"><img src="Blinkies/Guestbook.gif" id="blinkies" padding-top="5%"></a>
<hr>
<img src="Blinkies/dicesurvivor.PNG" id="blinkies">
<hr>
<img src="Blinkies/achrya.gif" id="blinkies" width="110%!important" height="auto">
<hr>
<img src="Blinkies/osdid.gif" id="blinkies">
</div>
</div>
当您在Footer上使用height: 100%;时，这基本上意味着获得absolute或relative位置的最近父对象的高度的100%。在您的情况下，它是<div class="all"元素。
您遇到的问题是<div class="all"元素的高度为0。
您可以选择以下选项之一来解决问题：
- 为
all元素添加高度
.all {
height: 100vh;
}
- 使
all元素也是absolute，然后它自动获取高度
.all {
position: absolute;
width: 50%;
}