页脚不会下降
Footer doesn't go donw
我的页脚没有留在底部。我做了 div "all content" 高度 = 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>
尝试将除页脚之外的所有内容包装到一个容器中（在名为 all-other-content 的示例中）并将以下 css 应用于您的代码。
额外的好处是您可以拥有响应式可变高度页脚，并且与所有浏览器兼容。此外，当页面内容高度超过视口高度时，页脚将向下推。
作为补充说明，请尝试从您的布局中删除绝对定位，这肯定会导致布局问题。
示例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/
你也用了太多的绝对定位。绝对定位意味着元素从正常的文档流中移除并且没有为它创建 space，并且它创建一个新的堆叠上下文（在这里阅读更多信息：Positioning）。这意味着您的元素不会一个接一个地停留，因为它们可能处于不同的层次并重叠。这是它们无法正确呈现的主要原因。尝试相对定位，或者如果你可以让它是静态的。
我的页脚没有留在底部。我做了 div "all content" 高度 = 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>
尝试将除页脚之外的所有内容包装到一个容器中（在名为 all-other-content 的示例中）并将以下 css 应用于您的代码。
额外的好处是您可以拥有响应式可变高度页脚，并且与所有浏览器兼容。此外，当页面内容高度超过视口高度时，页脚将向下推。
作为补充说明，请尝试从您的布局中删除绝对定位，这肯定会导致布局问题。
示例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/
你也用了太多的绝对定位。绝对定位意味着元素从正常的文档流中移除并且没有为它创建 space，并且它创建一个新的堆叠上下文（在这里阅读更多信息：Positioning）。这意味着您的元素不会一个接一个地停留，因为它们可能处于不同的层次并重叠。这是它们无法正确呈现的主要原因。尝试相对定位，或者如果你可以让它是静态的。