2014-02-16 3 views
0

끈적 거리는 다른 바닥 글 질문을 가져 오는 것이 싫지만 이틀 동안 답변을 찾은 시간 이후에는 포기합니다.화면 높이가 너무 작 으면 끈적한 바닥 글이 작동하지 않음

여기에 문제의 내 페이지의 : http://aaronisdead.com/sites/kanwakan/kanwakan.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 내 HTML 구조의 내 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; 
} 

나는 무엇이 원인인지 잘 모르겠습니다. 이 때문에 많은 정보가 포함되었습니다. 당신이 시간을내어 끈적 끈적한 바닥 글을 이해하는 데 큰 도움이된다면, 웹 개발자로서 영원히 사용할 수있는 기술이 필요합니다. 고맙습니다.

답변

2

.mainwrap에서 height: 100%을 제거하고 .wrapper 안에 넣습니다.

관련 문제