Дочерний div торчит или относительно расположен родительский div/нижний колонтитул

У меня проблемы с моими div. Я пытаюсь сделать родительское погружение контента, которое будет растягиваться по мере размещения в нем сообщений (тема WordPress) без дочернего элемента div, выступающего снизу. Я обнаружил, что ключ к этому — сделать родительский div абсолютным, но это создает для меня еще одну проблему. Дело в том, что я также хочу, чтобы нижний колонтитул с относительной позицией перемещался по мере растяжения содержимого div. Итак, что я пытаюсь сделать, так это то, как я могу одновременно иметь «растягивающийся» контент и нижний колонтитул с относительной позицией? Вот мой css:

body{height: 100%; 
margin: 0;
padding: 0;
} 
#wrapper{width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
}
#content{height: 35em;
width: 30em:
position: absolute;
padding: .62em;
margin: 5em;
}
.post{width: 12em;
height: 12em;
margin: 1em;
float: left;
}
#footer{position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 1em 0 0;
}

Как я уже сказал, я уже пробовал относительное позиционирование, но мне это не понравилось. Я также попробовал метод «липкого нижнего колонтитула», который отлично работает на экране с большим разрешением, но отображается либо впереди, либо позади блока содержимого (в зависимости от z-индекса) на экранах с меньшим разрешением. Кроме того, если это возможно, я бы предпочел не использовать JS. Любая помощь высоко ценится! введите код сюда


html parent-child footer
person Alfonso Verdeja    schedule 08.09.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

  • Установите автоматическое переполнение содержимого,
  • Измените высоту на минимальную высоту в содержании,
  • Заверните абсолютные элементы в относительный div для счастья.

Вот jsfiddle, показывающий это: http://jsfiddle.net/mAhet/

HTML

<html>
<body>
    <div id="wrapper">
        <div id="content">
            <div style="position:relative; width:100%; height:100%;">
             <div class="post">lasa sf </div>
             <div class="post"> asd asd as</div>
             <div class="post"> asd a dsadda das</div>
        </div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>​

CSS

body{height: 100%; 
margin: 0;
padding: 0;
} 
#wrapper{width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
position:relative;
}
#content{

min-height: 35em;
width: 30em:
position: absolute;
padding: .62em;
margin: 5em;
overflow:auto;
}
.post{width: 12em;
height: 12em;
margin: 1em;
float: left;
}
#footer{position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 1em 0 0;
}​

Вот jsfiddle, показывающий это в действии: http://jsfiddle.net/mAhet/

person jett    schedule 08.09.2012