Html 粘性页脚不'；如果屏幕高度太小，则无法工作_Html_Css_Sticky Footer

Html 粘性页脚不'；如果屏幕高度太小，则无法工作

html css

Html 粘性页脚不'；如果屏幕高度太小，则无法工作,html,css,sticky-footer,Html,Css,Sticky Footer,我不想再提一个黏糊糊的问题，但经过两天几个小时的寻找答案后，我放弃了以下是我在这一页的看法：这是我的HTML架构 <html> <head> </head> <body> <header> <div class="headercenter"><img src="kanwakanheader.png"></div> </header> <div class="

我不想再提一个黏糊糊的问题，但经过两天几个小时的寻找答案后，我放弃了

以下是我在这一页的看法：

这是我的HTML架构

<html>
 <head>
</head>
<body>
<header>
<div class="headercenter"><img src="kanwakanheader.png"></div>
     </header>

    <div class="mainwrap">
            <div class="left">
                <img src="featonspin.png">
                <iframe src="https://player.vimeo.com/video/78659516" width="464" height="257" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
            <div class="right">
                <img src="featoncarson.png">
                <iframe src="https://player.vimeo.com/video/86751056" width="464" height="257" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
            <div class="bandpic">
                <img src="bandpic.jpg">
            </div>
            <div class="text">
</div>
    </div>
    <div class="wrapper">
        <div class="push"></div>
    </div>

<div class="footer">
    <div id="footwrap">
        <div id="leftcol">
            <img id="email" src="bottomcontact.png">
        </div>
        <div id="rightcol">
            <img id="andlogo" src="bottomlogos.png">
        </div>
    </div>
</div>

我不确定是什么原因造成的；因此，我包含了很多信息。如果你花点时间来完成这一切，你将在很大程度上帮助我理解粘性页脚，这是一项我作为一名web开发人员永远可以使用的技能。谢谢。

从

.mainwrap

中删除

高度：100%

，并将其移动到

包装器中
.mainwrap {
margin-right:auto;
margin-left:auto;
display:block;
width:950px;
top:75px;
height:100%;
}

.right {
position:relative;
width:50%;
margin-right:auto;
margin-left:auto;
display:block;
float:right;
padding:0 0 30 0;
}

.left {
position:relative;
padding-bottom:0px;
width:50%;
margin-right:auto;
margin-left:auto;
display:block;
float:right;
left:10px;
}

/*HEADER*/

.headercenter {
width:375px;
margin-right:auto;
margin-left:auto;
display:block;
}

header {
position:relative;
width:100%;
height:75px;
background:#000000;
}

/*FOOTER STUFF*/

#email, #andlogo {
height:75px;
}

#footwrap {
width:950px;
height:75px;
margin-right:auto;
margin-left:auto;
display:block;
}

#leftcol {
float:left;
width:50%;
}

#rightcol {
float:right;
width:50%;
}

/*ABSOLUTELY NECESSARY PAGE PROPERTIES*/

body {
background-image:url("background.jpg");
background-attachment: fixed;
background-height:100%;
background-repeat:repeat;
background-position:center;
}

* {
margin: 0;
}

html, body {
height: 100%;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -75px;
}

.footer {
width:100%:
position:absolute;
background:#000000;
z-index:999;
}

.footer, .push {
height: 75px;
}