如果屏幕高度太小，粘滞页脚不起作用

讨厌带来另一个粘性页脚问题，但在两天的时间内寻找答案后，我放弃了。如果屏幕高度太小，粘滞页脚不起作用

这里的问题我的页面：http://aaronisdead.com/sites/kanwakan/kanwakan.html

这里是我的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>

Annnd这里是我的CSS。

.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; 
}

我不确定是什么原因造成的;因为这个，我收录了很多信息。如果你花时间完成所有这些工作，你将以非常大的方式帮助我理解粘性页脚，这项技能我将永远可以用作Web开发人员。谢谢。

来源

2014-02-16 little tiny man

从.mainwrap中删除height: 100%并将其移动到.wrapper之内。

来源

2014-02-16 02:35:35 Nit

如果屏幕高度太小，粘滞页脚不起作用

回答

相关问题