html - 页脚不会下降

Question

我的页脚没有留在底部。我做了 div “所有内容”，高度 = 100%。正文和 html = 100%，绝对页脚位置。底部-50px；但是页脚跳转并停留在屏幕中央。尤其是在手机屏幕上。此外，页脚使蓝色框在移动版本中相互粘附。怎么了？

.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

尝试将除页脚之外的所有内容包装到一个容器中(在名为 all-other-content 的示例中)并将以下 css 应用于您的代码。

额外的好处是您可以拥有响应式可变高度页脚，并且与所有浏览器兼容。此外，当页面内容高度超过视口(viewport)高度时，页脚将被向下推。

作为补充说明，请尝试从您的布局中删除绝对定位，这肯定会导致布局问题。

示例 html:

<div class="all-content">
  <div class="all-other-content">
    All other content
  </div>
  <div class="footer">
    Footer
  </div>
</div>

示例 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;
}

这是一个有效的 fiddle : https://jsfiddle.net/3zctbsb3/