내용이 100 %이면 바닥 글이 겹칩니다.

Question

내가 원하는 것은 .content_pro가 항상 바닥 글의 맨 위에 고집되어 있고 화면의 해상도가 어느 정도인지입니다. 그러나 높이를 말하면 : 100 % 그것은 바닥 글 아래에옵니다. 나는'. 이것을 몇 시간 동안 고민하지만 작동하지 않을 것입니다. 여기 & CSS 내 HTML입니다 :

HTML :

<!--Begin Content-->  
<div id="content_pro"> 
    <div id="pro_menu"> 
     <div class="grey"><img class="pro_img" src="images/bannehof.jpg"><a href="subpages/bannehof.html" target="targetframe" class="pro_title">Bannehof</a><br /><br />Deuren c.a. 750</div> 
     <div class="white"><img class="pro_img" src="images/casaconfetti.jpg"><a href="subpages/casaconfetti.html" target="targetframe" class="pro_title">Casa Confetti</a><br /><br />Deuren c.a. 850</div> 
     <div class="grey"><img class="pro_img" src="images/citymax.jpg"><a href="subpages/citymax.html" target="targetframe" class="pro_title">Citymax</a><br /><br />Deuren c.a. 2200</div> 
     <div class="white"><img class="pro_img" src="images/nielsborghplaats.jpg"><a href="subpages/nielsborghplaats.html" target="targetframe" class="pro_title">Niels Borghplaat</a><br /><br />Deuren c.a. 15</div> 
     <div class="grey"><img class="pro_img" src="images/ronssehof.jpg"><a href="subpages/ronssehof.html" target="targetframe" class="pro_title">Ronssehof</a><br /><br />Deuren c.a. 2500</div> 
     <div class="white"><img class="pro_img" src="images/rusthoeve.jpg"><a href="subpages/rusthoeve.html" target="targetframe" class="pro_title">Rusthoeve</a><br /><br />Deuren c.a. 255</div> 
     <div class="grey"><img class="pro_img" src="images/westerbeek.jpg"><a href="subpages/westerbeek.html" target="targetframe" class="pro_title">Westerbeek</a><br /><br />Deuren c.a. 350</div> 
    </div> 
     <iframe class="pro_subpage" src="subpages/bannehof.html" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" ></iframe> 
</div> 
<!--End Content--> 
</div>  
<!--Begin Footer--> 
    <footer> 
    <div id="foo_container"> 
     <div id="foo_navs"> 
      <div id="foo_nav_1"> 
       &raquo <a href="../index.html">Home</a><br /> 
       &raquo <a href="../deuren">Deuren</a><br /> 
       &raquo <a href="../hangensluitwerk">Hang en Sluitwerk</a><br /> 
       &raquo <a href="#">Projectbasis</a><br /> 
      </div> 
      <div class="foo_sep"></div>   
      <div id="foo_nav_2"> 
       &raquo <a href="../particulier">Particulier</a><br /> 
       &raquo <a href="../recenties">Recenties</a><br /> 
       &raquo <a href="../fotos">Foto's</a><br /> 
       &raquo <a href="../werkwijze">Werkwijze</a> 
      </div> 
      <div class="foo_sep"></div> 
      <div id="foo_nav_3"> 
       &raquo <a href="../contact">Contact</a> 
      </div> 
      <div class="foo_sep"></div> 
      <div id="copyright"> 
       Copyright &copy;<br /> <a href="http://www.grafisch-centrum.nl" target="_blank">Grafisch Centrum Etten-Leur</a> 2014 
      </div> 
     </div> 
     <div id="foo_keurmerk"> 
      <a href="http://www.inbraakproef.nl" target="_blank"><img class="foo_inbraak" src="../images/pkvw-logo.png" /></a> 
      <a href="../images/VCA07042011Roos.tiff"><img class="foo_vca" src="../images/vca1.png"/></a> 
      <div class="foo_sep_keurmerk"> 
     </div> 
     </div> 
     </div> 
    </footer> 
<!--End Footer--> 

CSS :

* { 
    width:100%; 
    margin:0 auto; 
    padding: 0; 
    font-family:arial; 
    overflow-x: hidden; 
    position: relative; 
} 

html, body { 
    height: 100%; 
} 

    #content_pro { 
    overflow: hidden; 
    z-index: 9; 
    height: 100%; 
} 

#pro_menu { 
    height: 84%; 
    width: 380px; 
    position: absolute; 
    float: left; 
    overflow-y: scroll; 
    margin: 80px 0px 25px 0px; 
    overflow-x: hidden; 
    z-index: 999; 
} 

footer, .push { 
    width: 100%; 
    background-color: #eb691e; 
    height: 100px; 
    z-index: 10; 
    overflow: hidden; 
} 

감사합니다!

Answer 1

먼저 당신이 당신은 단지 그것을 별도의 규칙과 그에게 필요한

* { 
    margin:0; 
    padding:0; 
} 

글꼴 - 가족을 사용할 필요가 없습니다 그 그러나 때때로을 남길 수 있습니다

* { 
    width:100%; 
    margin:0 auto; 
    padding: 0; 
    font-family:arial; 
    overflow-x: hidden; 
    position: relative; 
} 

당신의 CSS에서이 단계를 제거하려면 본문 태그에 사용 -

body { 
    font: Arial, Helvetica, sans-serif; 
} 

귀하의 질문은. 여기에 정확히

HTML을

<div id="wrapper"> 
    <div class="w1">sdfsdfsd</div> 
</div> 
<footer id="footer">ssdfsdfs</footer> 

CSS

html, body { 
    height: 100%; 
    margin: 0; 
} 
#wrapper { 
    min-height: 100%; 
    width: 100%; 
} 
.w1 {padding-bottom:50px /*footer height*/;} 
#footer { 
    height: 50px; 
    margin-top: -50px; /*equal to footer height */ 
    position: relative; 
    width: 100%; 
} 

Answer 2

내가 정확히 귀하의 질문을 이해한다면 다음과 같이 생각합니다. 방금 패딩을 추가했습니다.

여기 이것은 당신이 원하는 무엇 바이올린http://jsfiddle.net/9cKTH/

* { 
    width:100%; 
    margin:0 auto; 
    padding: 0; 
    font-family:arial; 
    overflow-x: hidden; 
    position: relative; 
} 

html, body { 
    height: 100%; 
} 

    #content_pro { 
    overflow: hidden; 
    z-index: 9; 
    height: 100%; 
    padding-bottom:50px; 
} 

#pro_menu { 
    height: 84%; 
    width: 380px; 
    position: absolute; 
    float: left; 
    overflow-y: scroll; 
    margin: 80px 0px 25px 0px; 
    overflow-x: hidden; 
    z-index: 999; 
} 

footer, .push { 
    width: 100%; 
    background-color: #eb691e; 
    height: 100px; 
    z-index: 10; 
    overflow: hidden; 
} 

입니까 ?? 모든