Как сделать div нижнего колонтитула всегда внизу страницы - PullRequest
Новая
       11

Как сделать div нижнего колонтитула всегда внизу страницы

4 голосов
/ 19 декабря 2011

Когда открываются всплывающие окна и увеличивается высота тела

нижний колонтитул должен идти внизу страницы, но я не могу найти, как это сделать

вот мой код 

<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>

Спасибо, что прочитали это

Любое предложение будет оценено.

Ответы [ 4 ]

4 голосов
/ 22 февраля 2014

HTML: 

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

CSS: 

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
2 голосов
/ 23 мая 2014 
#element
{
  position:fixed;
  bottom:0;
  z-index:50000; //Just in case :)
}
1 голос
/ 19 декабря 2011

Попробуйте свойство CSS выровнять по вертикали, например: 

#nameOfTheElement
{
    vertical-align: baseline;
}
1 голос
/ 19 декабря 2011
...