-2
Peu importe ce que j'essaie, mon pied de page reste sur le bas de mon écran et non pas après que mon contenu soit tel que j'en ai besoin. Il reste au bas de mon écran et sur mon contenu qu'il est censé être sous. Je place mon en-tête (pas dans le jsfiddle), content, et footer div dans un wrapper qui a 100% de hauteur. voici le jsfiddle jsfiddle Le pied de page ne se montre même pas sur le violon !!!!Pourquoi mon entête ne reste-t-il pas sous mon contenu?
CSS
body{
background-color: #555;
margin: 0;
padding: 0;
height: 100%;
}
#wrapper{
min-height: 100%;
position: relative;
height: 100%;
}
#content{
top: 140px;
position: absolute;
height: 90%;
width: 100%;
font-family: 'Times New Roman', Times, serif;
padding-bottom: -70px;
}
#content h2{
text-align: center; ;
color: white;
margin: 50px auto;
width: 60%;
}
/*Footer*/
#footer{
width: 100%;
height: 70px;
background-color: black;
color: white;
font-size: 12px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
z-index: 9999;
}
#footer p{
padding-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div id="wrapper">
<div id="header"></div>
<a href="restaurant_reserve.php"><button id="reserve-button" class="w3-btn-block w3-hover-white" style="font-weight: bold; font-size: 15px; position: fixed; top: 100px; z-index: 999;">Reserve Now!</button></a>
<div id="content">
<img style="width: 100%; height: auto;" src="images/slider/examples/slide-example3.png">
<h2><strong>Come and devour Friendz' hunger satisfying selection of the
most delectable soul foods around!</strong>
</h2>
<div class="info-block1">
<img src="images/restaurant_examples/example1.jpg" title="Chicken breast with veggies" alt="Chicken breast with veggies">
<p> Come and enjoy our delicious chicken breast and vegetables. This is just test text that is
be used for demonstration and to take up space.</p>
</div>
<div class="info-block2">
<img src="images/restaurant_examples/example2.jpg" title="Some type of food" alt="example2">
<p> This is just generic text. I am writing and typing this off of the top of my head
and it is meant just to take up space.</p>
</div>
<div class="info-block1">
<img src="images/restaurant_examples/example3.jpg" title="Some type of food" alt="example2">
<p>This is even more generic text that is being used to take up
space and demonstrate potential formatting of the website.</p>
</div>
<div class="info-block2">
<img src="images/restaurant_examples/example4.jpg" title="Some type of food" alt="example2">
<p>Lorem ipsum dolor sit amet, fabulas phaedrum mea no, an eum utinam
libris dictas, audire expetenda eu quo.
</p>
</div>
</div>
<div id="footer">
<p>Footer Test</p>
</div>
</div><!--end wrapper div-->
</body>
</html>S'il vous plaît aider
Le #header n'est pas défini dans votre JSFiddle, il n'a pas non plus de contenu donc par défaut il n'y a rien à montrer. Essayez de reformuler votre question ou de proposer un code pertinent. – rsn
Désolé @rsn je voulais dire FOOTER pas en-tête –
Si vous voulez que le pied de page apparaisse après le contenu, pourquoi lui avez-vous donné une position d'absolution? Supprimez simplement les propriétés 'position: absolute',' bottom: 0' et 'left: 0' de la règle' # footer'. –