Footer doesn't go donw - html

Question

My footer doesn't stay at the bottom. I did div "all content" with height = 100%.
Body and html = 100%, footer position absolute. And bottom -50px;
But footer jumps and stays in the centre of screen.
Especially it happens with a mobile screen.
Also footer makes blue boxes stick to each other in mobile version.
What is wrong?
.all-content{
min-height: 100%;
/* margin-bottom: -50px; */
}
/*
******************
* ABOUT US
******************
*/
.about-us{
width: 100%;
min-height: 100%;
min-height: 500px;
position: relative;
}
.girl{
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
.doctor{
margin-left: 20vw;
height: 95%;
position: absolute;
z-index: 2;
bottom: 0px;
}
.info-text{
position: absolute;
z-index: 2;
right: 20vw;
top: 60px;
text-align: right;
}
.info-text h1, .info-text h2, .info-text h5,.icon-facebook {
color:white;
}
.info-text h1{
font-size: 3em;
color: #0082c6;
}
.info-text h2{
font-size: 2em;
}
.info-text h4, .info-text h2, .info-text h1{
line-height: 1;
}
.info-text hr{
margin-top: 1vh;
margin-bottom: 2vh;
margin-left: 10px;
margin-right: 10px;
border:none;
height: 1px;
background-color: #D8D8D8;
}
.fist-button{
padding: 10px 40px;
float: right;
}
.icon-facebook{
border: 2px solid white;
border-radius: 50%;
padding: 3px;
font-size: 2em;
}
.hidden{
display: none;
}
#media (max-width: 1360px){
.doctor{
margin-left: 15vw;
}
.info-text{
right: 15vw;
}
}
#media (max-width: 978px){
.info-text h5{
display: none;
}.doctor{
margin-left: 20px;
}
.fist-button{
display: none;
}
.info-text{
right: 20px;
}
.info-text hr{
position: absolute;
top: 0;
right: 0;
z-index: 2;
border:none;
height: 1px;
background-color: #D8D8D8;
width: 250px;
}
.info-text h1{
font-size: 2em;
color: #0082c6;
font-family: 'OpenSansHebrew-Bold';
margin-top: 20px;
}
.info-text h2{
padding-top: 0px;
font-size: 1.5em;
font-family: 'OpenSansHebrew-Bold';
}
.hidden{
display: block;
}
}
/*
******************
* OUR TREATMENTS
******************
*/
/* .our-treatments{
width: 100%;
height: 350px;
background: white;
text-align: center;
} */
.tree-columns-container{
margin-left: 18%;
margin-right: 18%;
min-height: 100%;
/* min-height: 350px; */
}
.column-container{
display:block;
margin-right: 4%;
height: 100%;
width: 257px;
position: relative;
}
.img-container{
height: 120px;
width: 100%;
text-align: center;
}
.column-container img{
margin:auto;
margin-top: 30px;
}
.blue-small{
display: table;
background: #0082c6;
height: 70px;
width:90%;
margin: 0 5%;
top:120px;
position: absolute;
z-index: 2;
text-align: center;
}
.blue-small h3{
display: table-cell;
vertical-align: middle;
}
.blue-big{
height:auto;
min-height: 330px;
width:100%;
background:#61c2ee;
position: absolute;
z-index: 1;
top:160px;
text-align: center;
}
.blue-big h4{
text-align: right;
padding-right: 20px;
padding-top: 10px;
font-size: 0.9em;
}
.column-container h3{
color: white;
}
.column-container h4{
margin-top: 50px;
color: white;
}
.blue-big button{
padding: 10px 30px;
background: #61c2ee;
border: 1px solid white;
font-size: 1em;
}
.blue-big table{
margin-top: 50px;
color: white;
border-spacing:15px;
border-collapse: separate;
}
.blue-big table tr td{
text-align: right;
padding-right: 10px;
}
.blue-big table tr td:first-child{
border-right: 1px solid #fff;
}
.blue-big table tr{
margin-top: 10px;
}
.td-number{
font-size: 1.6em;
vertical-align:middle;
}
#media (min-width: 1160px){
.tree-columns-container{
height: 350px;
}
.column-container{
float: left;
}
.column-container:last-child{
margin-right: 0px;
}
}
#media (max-width: 1160px){
.tree-columns-container{
height: 100%;
}
.column-container{
margin: 10px auto 0px;
width: 257px;
}
}
.footer{
width: 100%;
height: 50px;
background: grey;
position: absolute;
margin-top: -50px;
}
.footer h5{
margin-top:15px;
}
.footer h5:first-child{
float: left;
}
.footer h5:last-child{
float: right;
}
#media (min-width: 978px){
.footer-content{
margin-left: 18%;
margin-right: 18%;
height: 30px;
}
}
#media (max-width: 978px){
.footer{
height: 140px;
}
.footer-content{
margin-left: 10%;
margin-right: 10%;
}
}
<body>
<div class="all-content">
<img class="doctor" src="img/Doctor.png" alt="Doctor">
<img class="girl" src="img/girl.png" alt="Girl">
<div class="clear"></div>
</div>
<div class="tree-columns-container">
<div class="column-container">
<div class="img-container">
<img src="img/hand.png">
</div>
<div class="blue-small">
<h3>
מהם המפתחות
<br> ?להצלחת הניתוח
</h3>
</div>
<div class="blue-big">
<table>
<tr>
<td>
<h5>לבוא מוכן לניתוח - להכיר את סוגי הניתוחים ולהבין את המהלך הצפוי
</h5>
</td>
<td class="td-number">1</td>
</tr>
<tr>
<td>
<h5>לבחור את המנתח הנכון במקום הנכון - מנתח המתמחה בניתוחי קיצור קיבה, בעל ניסיון עשיר וסביבת
עבודה עם כל המערך התומך הנדרש
</h5>
</td>
<td class="td-number">2</td>
</tr>
<tr>
<td>
<h5>להקפיד על ההנחיות לאחר הניתוח - תזונה, פעילות גופנית ונטילת ויטמינים ותוספי מזון
</h5>
</td>
<td class="td-number">3</td>
</tr>
</table>
</div>
<div class="clear"></div>
</div>
<div class="column-container">
<div class="img-container">
<img src="img/notes.png">
</div>
<div class="blue-small">
<h3>
?שלי BMB-מה ה
</h3>
</div>
<div class="blue-big">
<h4>
.מדד מסת הגוף הינו חישוב פשוט של
<br>משקל הגוף חלקי ריבוע הגובה
</h4>
<button>
חשב/י את ה-BMI שלך
</button>
</div>
</div>
<div class="column-container">
<div class="img-container">
<img src="img/weigher.png">
</div>
<div class="blue-small">
<h3>
מהם הקריטריונים
<br>?לניתוח קיצור קיבה
</h3>
</div>
<div class="blue-big">
<table>
<tr>
<td>
<h5>BMI > 40
</h5>
</td>
<td class="td-number">1</td>
</tr>
<tr>
<td>
<h5>BMI > 35 עם תחלואה נלווית הקשורה להשמנת יתר כגון סכרת, יתר לחץ דם, עודף כולסטרול, דום נשימה
בשינה, בעיות אורטופדיות, הפרעה בפוריות, כבד שומני ועוד
</h5>
</td>
<td class="td-number">2</td>
</tr>
<tr>
<td>
<h5>BMI > 30 לאחר כישלון ניתוח קיצור קיבה קודם או עם סכרת קשה ולא מאוזנת (במסגרת מחקרית)</h5>
</td>
<td class="td-number">3</td>
</tr>
</table>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
<footer class="footer">
<div class="footer-content">
<h5>לקביעת תור לד"ר אלדר חייגו 052-4262021 </h5>
<h5>ד"ר שי מרון אלדר פתרונות כירורגיים להשמנת יתר </h5>
</div>
<div class="clear"></div>
</footer>
</html>

Answer 1

Try wrapping all your content except the footer into a container (in the example named all-other-content) and apply the following css to your code.
The added bonus is that you can have a responsive variable height footer and is compatible with all browsers. Also, when page content height exceeds viewport's height, the footer is just pushed downwards.
As an additional remark, try removing absolute positioning from your layout, which is certainly going to cause sou layout issues.
Example html:
<div class="all-content">
<div class="all-other-content">
All other content
</div>
<div class="footer">
Footer
</div>
</div>
Example css:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.all-content {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.all-other-content {
display: table-row;
height: 100%;
}
.footer {
display: table-row;
height: 1px;
background: gray;
}
Here is a working fiddle:
https://jsfiddle.net/3zctbsb3/

Answer 2

You also use too much the absolute positioning. Absolute positioning means that the element is removed from the normal document flow and no space is created for it, and a it creates a new stacking context (read more here:Positioning). What this means is that your elements will not stay one after the other because they might be on different levels and overlay. This is the main reason why they don't render correctly. Try relative positioning or if you can just let it be static.