我的页脚有问题，我希望它位于页面的底部，只有在我给出固定位置属性时它才有效。但我不希望页脚随屏幕滚动。我检查了StackOverflow和CSS粘性页脚上的类似问题，但我找不到适合我的那个。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<!--Polskie znaki-->
<meta charset="UTF-8">
<!--Responstywność-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!--Arkusz styli-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/superslides.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato:100,200,300,400,700,900,300italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div id="header">
<ul class="topnav">
<li style="padding:5px; margin-right: 50px;"><img src="img/logo.png"></li>
<li><a class="active" href="#home">STRONA GŁÓWNA</a></li>
<li><a href="#news">NASZE PRODUKTY</a></li>
<li><a href="#contact">KONTAKT</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()"><img src="img/burgermenu.png" alt="Rozwiń menu dla wersji responsywnej"></a></li>
<form>
<span><input type="text" class="search searchform" placeholder="Szukaj..."></input></span>
</form>
</ul>
<!--SLIDER-->
<div class="wide-container">
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/slider.jpg" alt="">
<h2>Lata doświadczeń
</br>      i gwarancja profesjonalizmu.</h2>
</li>
<li>
<img src="img/slider.jpg" alt="Cinelli">
</li>
<li>
<img src="img/slider.jpg" width="1024" height="682" alt="Surly">
</li>
<li>
<img src="img/slider.jpg" width="1024" height="683" alt="Cinelli">
</li>
<li>
<img src="img/slider.jpg" width="1024" height="685" alt="Affinity">
</li>
</ul>
<nav class="slides-navigation">
<a href="#" class="next"><img src="img/next.png" alt="Następny"></a>
<a href="#" class="prev"><img src="img/previous.png" alt="Poprzedni"></a>
</nav>
</div>
</div>
<!--TOGGLE SIDEBAR-->
<!-- =========================
Sidebar
============================== -->
<div id="content">
<section id="page">
<main class="middle">
<div class="row">
<div class="span3">
<div class="well">
<div>
<ul class="nav nav-list">
<li><label class="tree-toggle nav-header">Zestawy do badań nieniszczących NDT<a href="#"><img id="openicon" src="img/openincon.png" alt="rozwiń"></a></label>
<ul class="nav nav-list tree">
<li><a href="#">Zmywacz</a></li>
<li><a href="#">Penetrant</a></li>
<li><a href="#">Wywyływacz</a></li>
<li><a href="#">Podkład Biały</a></li>
<li><a href="#">Zawiesina czarnego proszku magnetycznego</a></li>
<li><a href="#">Penetracja fluorescencyjna</a></li>
</ul>
</li>
<li class="divider"></li>
<li><label class="tree-toggle nav-header">Środki Przeciwodpryskowe<a href="#"><img id="openicon" src="img/openincon.png" alt="rozwiń"></a></label>
<ul class="nav nav-list tree">
<li><a href="#">Preparat w postaci pasty</a></li>
<li><label class="tree-toggle"><li>Preparaty aerozolowe</li></label>
<ul class="nav nav-list tree">
<li><a href="#">Prep 1</a></li>
<li><a href="#">Prep 2</a></li>
</ul>
</li>
<li><label class="tree-toggle"><li>Preparaty w postaci cieczy</li></label>
<ul class="nav nav-list tree">
<li><a href="#">Prep 1</a></li>
<li><a href="#">Prep 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="divider"></li>
<li><label class="tree-toggle nav-header">Środki trawiące<a href="#"><img id="openicon" src="img/openincon.png" alt="rozwiń"></a></label>
<ul class="nav nav-list tree">
<li><a href="#">Pasty trawiące</a></li>
<li><a href="#">Płyn trawiący</a></li>
<li><a href="#">Płyn pasywujący PPAS</a></li>
<li><a href="#">Pasta neutralizacyjn PN-1</a></li>
</ul>
</li>
<li class="divider"></li>
<li><label class="tree-toggle nav-header">Topniki<a href="#"><img id="openicon" src="img/openincon.png" alt="rozwiń"></a></label>
<ul class="nav nav-list tree">
<li><a href="#">Topniki do lutów twardych - Boraks</a></li>
</ul>
</li>
<li class="divider"></li>
<li><label class="tree-toggle nav-header">Luty twarde<a href="#"><img style="float:right;" src="img/openincon.png" alt="rozwiń"></a></label>
<ul class="nav nav-list tree">
<li><a href="#">Spoiwa mosiężne</a></li>
<li><a href="#">Spoiwa aluminiowe</a></li>
<li><a href="#">Spoiwa brązowe i miedziane</a></li>
</ul>
</li>
<li class="divider"></li>
<li><label class="tree-toggle nav-header">Koncentrat biostatyczny GOP<a href="#"><img style="float:right;" src="img/openincon.png" alt="rozwiń"></a></label>
</ul>
</div>
</div>
</div>
</div>
<!--OBRAZKI I TEKST-->
<div class="blocks">
<div class="block">
<div class="image"><img src="img/photo1.png" alt=""></div>
</div>
<div class="block">
<div class="image"><img src="img/photo1.png" alt=""></div>
</div>
<div class="block">
<div class="image"><img src="img/photo1.png" alt=""></div>
</div>
<div class="block">
<div class="image"><img src="img/photo1.png" alt=""></div>
</div>
<div class="block">
<div class="image"><img src="img/photo1.png" alt=""></div>
</div>
<div class="block">
<div class="image"><img src="img/photo1.png" alt=""></div>
</div>
</div>
<!--KONTAKT-->
<div class="container">
<div class="kontakt">
<div>
<p>tel.:<span>+48 000 000 000</span></p>
</div>
<div>
<p>e-mail.:<span>topchem@topchem.pl</span></p>
</div>
</div>
</div>
<div class="container-fluid sidetext">
<div class="row-fluid">
<h1 class="post-title">   O FIRMIE    </h1>
<p>Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac. Vestibulum congue nisl magna. Ut vulputate odio id dui convallis in adipiscing libero condimentum. Nunc et pharetra enim. Praesent pharetra, neque et luctus tempor, leo sapien faucibus leo, a dignissim turpis ipsum sed libero. Sed sed luctus purus. Aliquam faucibus turpis at libero consectetur euismod. Nam nunc lectus, congue non egestas quis, condimentum ut arcu. Nulla placerat, tortor non egestas rutrum, mi turpis adipiscing dui, et mollis turpis tortor vel orci. Cras a fringilla nunc. Suspendisse volutpat, eros congue scelerisque iaculis, magna odio sodales dui, vitae vulputate elit metus ac arcu. Mauris consequat rhoncus dolor id sagittis. Cras tortor elit, aliquet quis tincidunt eget, dignissim non tortor.</p>
</div>
</div>
<!-- /.post -->
<!-- /#content -->
</main>
</section>
</div>
<!--STOPKA-->
<div class="clear"></div>
<div id="footer_container">
<div class="footer-right">
<a href="#"><img src="img/Twitter.png"></a>
<a href="#"><img src="img/facebbok.png"></a>
<a href="#"><img src="img/googleicon.png"></a>
</div>
<div class="footer-left">
<p class="footer-links">
<a href="#">Strona główna</a>
<a href="#">Nasze produkty</a>
<a href="#">Kontakt</a>
</p>
</div>
</div>
<!-- /#
<!--menu SCRIPT-->
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js"></script>
<!--SLIDER SCRIPT-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.animate-enhanced.min.js"></script>
<script src="js/jquery.superslides.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$('#slides').superslides({
inherit_width_from: '.wide-container',
inherit_height_from: '.wide-container'
});
});
</script>
<!--NAV SCRIPT-->
<script type="text/javascript">
$('.tree-toggle').click(function () {
$(this).parent().children('ul.tree').toggle(200);
});
$(function(){
$('.tree-toggle').parent().children('ul.tree').toggle(200);
})
</script>
</body>
</html>
CSS代码：
<style>
body {
margin: 0;
padding: 0;
height: 100%;
}
html {
background: #ececec;
box-sizing: border-box;
}
#page{
background: #ececec;
margin-bottom: 100px;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* TOP NAVIGATION */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #ffffff;
font-family: 'Lato', sans-serif;
color: #343e5c;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #343e5c;
text-align: left;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 12pt;
}
ul.topnav form {
float:right;
margin-right: 40px;
}
ul.topnav li a:hover {background-color: #f2f3f4;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav form:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
ul.topnav.responsive form {
float: center;
display: inline;
}
}
/* SEARCH BAR */
.search {
padding:15px 15px 15px 49px;
margin:3px;
background: url('../img/search.png') no-repeat 20px 15px;
}
.searchform {
background-color: #c0dbf3;
border:none;
}
input[type=text]{
color:#4f98d7;
}
::-webkit-input-placeholder { /* For WebKit browsers */
color:#4f98d7;
font-weight:bold;
}
:-moz-placeholder { /* For Mozilla Firefox 4 to 18 */
color:#4f98d7;
font-weight:bold;
}
::-moz-placeholder { /* For Mozilla Firefox 19+ */
color:#4f98d7;
font-weight:bold;
}
:-ms-input-placeholder { /* For Internet Explorer 10+ */
color:#4f98d7;
font-weight:bold;
}
/* SLIDER */
.wide-container {
height: 600px;
margin: 0 auto;
}
/* TOGGLE SIDEBAR */
.middle {
max-width: 1300px;
background: #ececec;
position: absolute;
color: #343e5c;
margin-left: 10%;
margin-right: 15%;
padding-bottom: 140px;
height: auto !important;
}
.row{
padding: 0 10px;
width: 30%;
float: left;
margin-left: 0px;
}
.span3{
margin: 30px 30px 10px 15px;
}
.well{
list-style-type: none;
}
#openicon{
float: right;
}
li.divider{
border-bottom: 1px solid #e4e5e7;
margin-bottom: 10px;
margin-top: 5px;
}
/* MAIN */
.blocks {
float: right;
width: 70%;
}
.blocks .block {
display: inline-block;
margin: 30px 30px 10px 0px;
}
.sidetext{
float: right;
max-width: 70%;
}
.row-fluid{
margin-right: 20%;
text-align: justify;
font-family: 'Lato', sans-serif;
color: #b2b2b2;
}
@media screen and (min-width:1282px) and (max-width:1920px){
.middle{
float: center;
}
.kontakt{
font-size:10pt;
font-family: 'Lato', sans-serif;
font-weight: 700;
float: left;
position: relative;
width: 325px;
margin-left: -70px;
border-radius: 5px;
background: #f5f5f5;
padding: 20px;
border: 1px solid #e3e3e3;
}
}
@media screen and (min-width:981px) and (max-width:1281px){
.kontakt{
width: 285px;
margin-left: -5px;
float: left;
}
}
@media screen and (min-width:681px) and (max-width:980px) {
.row{
width: 100%;
}
.blocks{
width: 100%;
margin-right: -30px;
}
.blocks .block {
display: inline-block;
}
.kontakt{
margin: 20px -10px 20px 10px;
width: 95%;
}
.sidetext{
max-width: 100%;
float: center;
}
.row-fluid{
margin-right: 0;
text-align: justify;
}
}
@media screen and (min-width:481px) and (max-width:680px) {
.row{
width: 100%;
}
.blocks{
width: 100%;
margin: 20px 0% 10px 9%;
}
.blocks .block {
display: inline-block;
}
.kontakt{
margin: 20px -10px 20px 10px;
width: 95%;
}
.middle{
margin-right: 10px;
margin-left: 0px;
max-width: 680px;
}
.sidetext{
max-width: 100%;
float: center;
}
.row-fluid{
margin-right: 0;
text-align: justify;
}
}
@media screen and (min-width:2px) and (max-width:480px){
html {
-webkit-text-size-adjust: none;
}
.row{
width: 100%;
}
.blocks{
width: 100%;
}
.blocks .block {
display: inline-block;
width: 100%;
margin-left: 18%;
}
.kontakt{
width: 100%;
}
.middle{
margin-left: 5px;
margin-right: 5px;
}
.sidetext{
max-width: 100%;
float: center;
}
.row-fluid{
margin-right: 0;
text-align: justify;
}
}
/* KONTAKT */
.kontakt{
font-size:12pt;
font-family: 'Lato', sans-serif;
font-weight: 700;
float: left;
position: relative;
border-radius: 5px;
background: #f5f5f5;
padding: 20px;
border: 1px solid #e3e3e3;
}
.kontakt span{
font-family: 'Lato', sans-serif;
font-weight: 100;
margin-left:auto;
}
/************************************************************************************
CONTENT
*************************************************************************************/
/* post */
.post-title {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 11pt;
text-align: center;
border-bottom: 1px solid #445485;
padding: 10px 0 10px 0;
color: #343e5c;
}
/************************************************************************************
FOOTER
*************************************************************************************/
#footer_container {
clear: both;
position:fixed;
bottom:0px;
background-color: #336699;
width:100%;
text-align:center;
padding: 35px 40px;
text-align: left;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
}
#footer_container .footer-left p{
text-transform: uppercase;
color: #8f9296;
font-size: 13px;
margin: 0;
}
/* Footer links */
#footer_container p.footer-links{
font-size:13px;
font-weight: bold;
color: #ffffff;
margin: 0 0 10px;
padding: 0;
}
#footer_container p.footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
margin-right: 30px;
}
#footer_container .footer-right{
float: right;
margin-top: 6px;
max-width: 180px;
}
#footer_container .footer-right a{
display: inline-block;
width: 35px;
height: 35px;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-left: 3px;
}
/* If you don't want the footer to be responsive, remove these media queries */
@media (max-width: 600px) {
.footer-distributed .footer-left,
.footer-distributed .footer-right{
text-align: center;
}
.footer-distributed .footer-right{
float: none;
margin: 0 auto 20px;
}
.footer-distributed .footer-left p.footer-links{
line-height: 1.8;
}
}
/* IE 6 */
* html #footer_container {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
</style>
答案 0 :(得分：0)
您的HTML有很多错误。
例如：
<input type="text" class="search searchform" placeholder="Szukaj..."></input>
应自我关闭，如：
<input type="text" class="search searchform" placeholder="Szukaj..." />
另外：</br>应为<br />（也是自动关闭）。
在第132行处有一个随机的</ul>，它不会关闭任何<ul>。
首先尝试修复错误，因为这很可能会导致浏览器出现故障。
但是，您的页脚应该位于文档的末尾，并带有position:static CSS属性。只要它是块
答案 1 :(得分：0)
defmodule Test2 do
def my_func(k, m) do
if Map.haskey?(k, m), do: warning(k, m), else: foo(k, m)
end
def warning(k, m) do
#Warning
m
end
# In this function you could apply the pattern matching
# described in the first part of this answer.
def foo(k, m) do
value = # do something
%{m | key => value}
end
end
html, body {
height: 100%;
}
.main-wraper {
min-height: 100%;
padding-bottom: 60px; /**footer height**/
}
.site-footer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
}