当重新调整尺寸时，使页脚按内容被推下页面，而不是悬停在

我使用了很多建议的方法来确保页脚停留在底部，但是当我重新调整窗口的大小以使其更小时由于以下位置，页脚不会被推下页面：固定;我正在使用，但否则它不会停留在正常大小的页面底部，因为内容不会填满整个页面。当重新调整尺寸时，使页脚按内容被推下页面，而不是悬停在

你能帮忙吗？

编辑： CSS

html, body { 
     margin:0; 
     padding:0; 
     height: 100%; 
} 

#container { 

} 

#spacer { 
     height: 10px; 
     background-color: #24246B; 
} 

@font-face { 
     font-family: palatino; 
     src: url('font/palatino.ttf'); 
} 

@font-face { 
     font-family: footer; 
     src: url('font/footer.ttf'); 
} 

.fb_widget { 
    float: right; 
    margin-right: 10px; 
} 

#header, #nav, article, section, body, #mail_success { 
     font-family: palatino; 
} 


#header { 
    margin-top: 1%; 
    text-align: center; 


/* font-size: 60px; 
    color: #F2E6FF; 
    border: solid #24246B; 
    background-color: #24246B; 
    width: 25.5%; 
    border-right-color: #4610B3; 
    border-right-width: 25px; 
    border-left-width: 15px; 
    margin-top: 2%; 
    text-align: right;*/ 
} 


#nav ul { 
    margin-top: 2%; 
    line-height: 30px; 
    font-size: 17px; 
    text-align: center; 
    background-color: #24246B; 
} 

#nav ul li { 
    display: inline; 
} 

#nav ul li a { 
    text-decoration: none; 
    color: #F2E6FF; 
    padding: 7px 2% 6px 2%; 
    font-weight: bold; 
    border-radius: 20%; 

    /* This makes it fade colour*/ 
    -o-transition: .5s; 
    -ms-transition: .5s; 
    -moz-transition:. 5s; 
    -webkit-transition: .5s; 
    transition: .5s; 
} 

#nav a:hover { 
    color: #24246B; 
    background-color: #F2E6FF; 
    border-radius: 20%; 
} 

body { 
    background-image: url('media/bg.png'); 
    padding-bottom: 60px; 
    height: 100%; 
    max-height: 100%; 

} 

article { 
    color: #24246B; 
    margin-left: 20%; 
    margin-right: 20%; 
    font-size: 20px; 
    font-weight: bold; 
} 

section { 
    font-weight: normal; 
    font-size: 15px; 
    text-align: justify; 
    padding-left: 2%; 
} 

form { 
    padding-left: 7%; 
    font-size: 19px; 
} 

input { 

    height: 25px; 
    width: 300px; 
    font-size: 14px; 

} 

.contact_submit { 
    width: 110px; 
    margin-right: 50%; 
    margin-left: 42%; 
} 

label { 
    text-align: right; 
    float: left; 
    display: block; 
    width: 260px; 
    font-weight: bold; 
} 

label:after { 
    content: ".."; 
    color: transparent; 
} 

#push { 
    height: 4em; 
} 

footer { 
    font-family: footer; 
    color: #cccccc; 
    font-size: 8px; 
    text-transform: uppercase; 
    font-style: italic; 
    text-align: center; 
    height: 4em; 



} 

footer:hover { 

    /* This makes it transition*/ 
    -o-transition: .5s; 
    -ms-transition: .5s; 
    -moz-transition:. 5s; 
    -webkit-transition: .5s; 
    transition: .5s; 
    color: #24246B; 
    font-size: 12px; 
} 

#mail_success { 
    text-align: center; 
    padding: 7%; 
    font-size: 17px; 
    font-weight: bold; 
} 

@media screen and (max-device-width: 640px) { 
    #logo { 
     display: none; 
    } 
}

HTML

<div id="push"></div> 
</div> 
<p></p> 
    <footer> 
     <p>&copy;2013 Built by Rob **</p> 
     <p>Designed by Akash ** &amp; Rob **</p> 
    </footer> 
</body>

来源

2013-08-01 rob1994

请在这里发布您的HTML＆CSS/JS代码。或者把它放在小提琴中，所以SO社区可以尝试帮助你 – designtocode

你能粘贴你的代码吗？页脚被固定是问题，fyi。 – Jacques

我添加了代码。烦恼的是，因为我在处理这个问题之前建立了很多网站，所以我有其他的css规则干扰了我尝试的方法 – rob1994

这是你的solution.Use粘footer.Include下面的CSS文件中的代码

* { 
    margin: 0; 
    } 
    html, body { 
     height: 100%; 
    } 
    .wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; 
    } 
    .footer, .push { 
    height: 4em; 
    }

希望它能帮助你。另外这里的更多细节 Link

来源

2013-08-01 12:49:24 Dash

嗨，感谢您的帮助。不幸的是，页脚仍然与文本的主体重叠。当我重新调整大小时：/ – rob1994

你检查了链接吗？你会在那里找到替代方法。 – Dash

你没有在你的代码粘贴或者给我们的jsfiddle的链接，所以这里是我认为你应该做的。

在你的CSS中，使用媒体查询并根据屏幕宽度更改页脚的显示方式。

肖像平板

@media (min-width: 481px) and (max-width: 768px)

景观智能手机

@media (min-width: 321px) and (max-width: 480px)

人像智能手机

@media (max-width: 320px)

使用这些设置：

#footer{ 
    position:whatever you want; 
}

仅供参考，您不受限于这些尺寸，这些只是常见尺寸，请根据需要定制它们。

来源

2013-08-01 12:53:46 Jacques

当重新调整尺寸时，使页脚按内容被推下页面，而不是悬停在

回答

相关问题