2011-12-19 4 views
3

는 팝업 창을 열 페이지의 하단에 항상 바닥 글 DIV를하고어떻게

바닥 글은 페이지 하단으로 이동해야 신체의 높이 확대,하지만 난 수행하는 방법을 찾을 수없는 것을

여기에 내 코드를 이해할 수있을 것이다이

어떤 제안을 읽기위한

<style> 
.div1{ 
width:360px; 
height:240px; 
overflow:auto; 
overflow-x:hidden; 
border:1px solid #f00; 
position:absolute; 
} 
.black_overlay{ 
display: none; 
position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; 
background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } 
.white_content { 
display: none; 
position: absolute; 
top: 25%; left: 25%; width: 50%; 
padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } 
</style> 
<a onclick="document.getElementById 
('light').style.display='block';document.getElementById('fade').style.display='block'" href="javascript:void(0)">open</a> 

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<br /><br /><br /><br /><br /> 

<div class="div1"> 
footer</div> 
<div id="light" class="white_content">content 
<br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br> 
<a onclick="document.getElementById 
('light').style.display='none';document.getElementById('fade').style.display='none'" href="javascript:void(0)">close</a> 
</div> 
<div id="fade" class="black_overlay"></div> 

감사합니다.

+0

보십시오이 http://www.cssstickyfooter.com/ –

답변

1

는 CSS 속성 수직 정렬을 시도,이 같은 :

#nameOfTheElement 
{ 
    vertical-align: baseline; 
} 
4

HTML :

<div id="footer"></div> 

CSS :

#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
} 
1
#element 
{ 
    position:fixed; 
    bottom:0; 
    z-index:50000; //Just in case :) 
}