当我缩小网站时,请帮助我,我正在创建一个网站而我的页脚不会停留在底部。我是初学者,所以代码可能有点凌乱。
我认为它不起作用,因为我的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>
答案 0 :(得分:0)
给position: fixed;
并在底部修复它,即使内容与下面的演示类似
body {
margin: 0;
}
div.footer-content {
background: red;
position: fixed;
bottom: 0;
width: 100%;
}
HTML
<div class="footer-content">
this is the footer
</div>
答案 1 :(得分:0)
你的意思是粘性页脚?
中更改CSS .footer-content { position: absolute; bottom: 0; width: 100%; }
答案 2 :(得分:0)
使用这样的负底边距。将.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
来达到更好的效果。