2012-04-29 2 views
0

Я создаю дивы в следующем heirachyДинамически созданный вопрос ДИВ poistioning

<div class="box"> 
Content goes here 
<div class="footer>Footer</div> 
</div> 
<div class="box"> 
Content goes here 
<div class="footer>Footer</div> 
</div> 
<div class="box"> 
Content goes here 
<div class="footer>Footer</div> 
</div> 

Основное окно «коробка» прокручивать. Я хочу, чтобы нижний колонтитул «нижний колонтитул» оставался нижней частью родительского контейнера i, e «box». Я работаю в Интернете в течение трех дней. Никто не работал. Очень тревожно. Пожалуйста, помогите

+1

Вы имеете в виду вы хотите, чтобы сохраняться в нижней части окна, независимо от прокрутки? Пожалуйста, поделитесь своим кодом CSS. –

ответ

1

Вы должны использовать положение абсолютное и нижнее 0, как Sarfraz, упомянутое выше.

здесь приведен пример кода:

<html> 
<head> 
<style> 
body { width:100%;} 
.box { float: left; height: 200px; margin-right: 5%; position: relative; width: 20%;} 
.footer {bottom: 0px; position: absolute; width: 100%; text-align: center;} 
.box_content{ height: 180px; overflow-y: scroll;} 
.clear { clear:both;} 
</style> 
</head> 
<body> 
<div class="box"> 
    <div class="box_content"> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
    </div> 
    <div class="footer">Footer</div> 
</div> 
<div class="box"> 
    <div class="box_content"> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
    </div> 
    <div class="footer">Footer</div> 
</div> 
<div class="box"> 
    <div class="box_content"> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
     Content goes here <br /> 
    </div> 
    <div class="footer">Footer</div> 
</div> 
<div class="clear"> </div> 
</body> 
</html> 
Смежные вопросы