CSS Broken Height values in my site after implementing position:absolute-CodePudding

Im honestly not sure what the heck happened when I changed the position from relative to absolute. Most of my elements were in absolute already. But changing the header, footer, and main section messed up the heights and visibility. Im not sure what to do. Im not even sure what to look for [for solutions] so Stack Overflow is my last resort.

My site for reference: https://rosesystem.neocities.org/index.html

No matter what % value I put in, the height doesnt change for the footer and the main box.

The CSS and The 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 >

<!-- 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 >
<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""><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>

CodePudding user response：

When you use height: 100%; on your Footer, that basically means to get a 100% of height of the nearest parent with absolute or relative position. In your case it's an <div element.

The problem that you have is that <div element has a height of 0.

You can choose one of these options to fix the issue:

Add height to your all element

.all {
  height: 100vh;
}

Make your all element also absolute, and then it takes the height automatically

.all {
  position: absolute;
  width: 50%;
}