0
我的頁腳不留在底部。我做了高度= 100％的div「全部內容」。 身體和HTML = 100％，頁腳位置絕對的。底部-50px; 但頁腳跳躍和停留在屏幕的中央。 特別是其與手機屏幕發生。 頁腳也使得藍盒子相互粘在一起，在移動版本。 有什麼不對？頁腳不走donw
.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%;
\t 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>
首先，你的'footer'應該在'body'標籤內。然後，你可以嘗試在你的'.all-content'中添加'min-height：100vh;'，然後在'footer'上設置'min-height'。 – Krusader
是的，我也是這樣試過 – Natalia
看看這個例子https://jsfiddle.net/kLuo4fq5/ – Krusader