请帮助我，我正在制作一个网站，当我缩小网站时，我的页脚没有停留在底部。我是初学者，所以代码可能有点乱。
我认为它不起作用，因为我的 css 有其他问题，但我就是想不通。
html{
box-sizing:border-box;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
*,*:before,*:after{
box-sizing:inherit
}
body{
margin: 0;
overflow-x: hidden;
background-color: #f6f6f6;
}
ul {
padding: 4px 8px;
float: right;
}
a.nav-button {
padding: 8px 16px;
text-decoration: none;
color: black;
letter-spacing: 4px;
border: none;
outline: none;
font-family: Verdana,sans-serif;
font-size: 15px;
line-height: 1.5;
}
a.nav-button:hover {
background-color: #cccccc;
}
img.logo{
padding-top: 14px;
height: 50px;
float:left;
}
div.menu{
position:fixed;
width:100%;
z-index:1;
background-color: #ffffff;
}
div.front_img{
padding-top:500;
vertical-align: middle;
display:inline-block;
max-width:100%;
width: 100%;
max-height: 60%;
position: relative;
background-image: url(../images/front_image.jpg);
background-size: cover;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
}
div.webpage {
max-width:980px;
margin:auto;
}
div.container {
padding:0.01em 16px;
padding-top:32px;
padding-bottom: 32px;
max-width: 100%;
position: relative;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
background-color: #f6f6f6;
}
div.article {
padding:0.01em 16px;
padding-top:32px;
padding-bottom: 32px;
max-width: 100%;
position: relative;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
background-color: #f6f6f6;
}
div.h3-container {
border-bottom:1px solid #ccc;
width:100%;
}
h3 {
font-size: 24px;
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
p {
font-family: Verdana,sans-serif;
font-size: 15px;
line-height: 1.5;
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
div.footer {
position: relative;
padding-top: 6;
padding-bottom: 6;
padding-right: 8;
width: 100%;
text-align: right;
background-color: black;
color: goldenrod;
}
div.footer, a{
color: goldenrod;
}
div.footer-container {
position: relative;
padding:0.01em 16px;
padding-top:32px;
padding-bottom: 32px;
max-width: 100%;
width: 100%;
background-color: black;
color:goldenrod;
left:50%;
top:0;
transform:translate(-50%,0%);
-ms-transform:translate(-50%,0%);
border-bottom:1px solid goldenrod;
}
div.footer-background{
background-color: black;
overflow: hidden;
}
div.leverancier-wrap {
padding-left: 22;
background-color: white;
}
div.footer-content {
// tried position:fixed; here but didnt work :c
}
HTML<div class="footer-content">
<div class="container" style="max-width:1564px">
<div class="h3-container" id="intoduction">
<h3 class="Welcome-title"><img src="images/location_icon.png" height="30" length="20" hspace="20"/>Installatietechniek Haaglanden bevindt zich hier.</h3>
</div>
</div>
<style>
#map {
width: 100%;
height: 400px;
background-color: grey;
border-bottom: 5pt solid black;
}
</style>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 52.0442081, lng: 4.3370828};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[aint getting mah map]&callback=initMap">
</script>
<div class="leverancier-wrap">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide1.jpg" height="30" width="300">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide2.jpg" height="30" width="300">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide3.jpg" height="30" width="300">
<img class="leveranciers" src="http://www.installatietechniekhaaglanden.nl/images/slide4.jpg" height="30" width="300">
</div>
<div class="footer-background">
<div class="footer-container" style="max-width:1564px">
<div class="footer-text">
<h3>Contactgegevens</h3>
<p>Installatietechniek Haaglanden<span style="display:inline-block; width: 280px;"><img src="images/telphone-icon.png" height="16" length="8" hspace="259"/></span>070 7620180</p>
<p>Burgemeester Elsenlaan 321<span style="display:inline-block; width: 297px;"><img src="images/mail-icon.png" height="16" length="8" hspace="276"/></span>info@installatietechniekhaaglanden.nl</p>
<p>2282 MZ Rijswijk<a href="https://www.facebook.com/installatietechniekhaaglanden/"><img src="images/facebook-icon.png" height="16" length="8" hspace="362"/></a></p>
</div>
</div>
</div>
<div class="footer">
<p>Copyright © installatietechniekhaaglanden.nl. Designed by <a href="">ajeeth</a></p>
</div>
</div> 最佳答案
负边距法
像这样使用负底边距。保持 .push div 为空。
HTML
<body>
<div class="wrapper">
...content...
<div class="push"></div>
</div>
<footer class="footer">All rights reserved</footer>
</body>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
完整演示:codepen.io
其他方法
您还可以使用negative top margins、calc()、flexbox 和grid 来实现以更好的方式实现相同的效果。
关于javascript - 当我缩小网站时，我的页脚不会停留在网站底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46316375/