0
Mon pied de page ne reste pas au fond. J'ai fait div "tout le contenu" avec height = 100%. Corps et html = 100%, position de pied de page absolue. Et en bas -50px; Mais le pied de page saute et reste au centre de l'écran. Surtout ça se passe avec un écran mobile. Le pied de page permet également aux boîtes bleues de coller les unes aux autres dans une version mobile. Qu'est-ce qui ne va pas?Le pied de page ne va pas don
.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>
Tout d'abord 'footer' devrait être dans la balise' body'. Ensuite, vous pouvez essayer d'ajouter 'min-height: 100vh;' à votre '.all-content' et ensuite régler' min-height' sur votre 'footer'. – Krusader
Oui, j'ai essayé comme ça aussi – Natalia
Regardez cet exemple https://jsfiddle.net/kLuo4fq5/ – Krusader