Вертикально растянуть содержимое div с помощью динамического нижнего колонтитула

0

У меня возникли проблемы с реализацией следующего:

В моем index.html меня есть два div

  • content div вверху страницы

  • Временная timeline div внизу страницы. Этот div создается динамически с помощью jQuery, поэтому он не имеет фиксированной высоты

Я хочу, чтобы содержимое div растягивалось до конца div. Таким образом, высота содержимого div всегда равна (высота окна - timelineDiv-height). Когда для содержимого div слишком много контента, я не хочу, чтобы страница показывала полосы прокрутки, я хочу, чтобы только контент-div показывал полосы прокрутки.

Я знаю, что это возможно с javascript, но мне было интересно, есть ли способ с CSS? CSS будет проще, когда окно будет изменено (с javascript мне придется пересчитывать при изменении размера)

HTML

<body>
    <div id="content">
        test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
        <br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
        <br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
        <br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
    </div>
    <div id="timeline"></div>

</body>
</html>

CSS

#content {
    width: 100%;
    background: #CCC;
    overflow: scroll;
}

#timeline {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: #CCC;
}

Заранее спасибо!

  • 0
    Вы можете расположить div и зафиксировать и использовать верхнюю, нижнюю, левую и правую для точного положения на экране.
  • 0
    Правда, но это ничего не меняет. Проблема на самом деле не в расположении элементов div. Проблема в высоте content div. Если я просто исправлю оба div-а и много контента, вы не сможете увидеть контент за timeline шкалой -div и вниз оттуда.
Теги:
stretch

1 ответ

0

Этот метод называется "нижний колонтитул внизу" и имеет несколько реализаций, требующих определенной структуры. Гибкая высота нижнего колонтитула или фиксированная высота нижнего колонтитула

1) Гибкая высота нижнего колонтитула HTML

<div id="wrapper">
    <div id="content">
        <div class="content-holder">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque velit orci. Sed imperdiet tortor id est p</p>
        </div>
    </div>
    <div id="footer">
        <div class="footer-holder">
            <div class="footer-frame">  
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque velit orci. Sed imperdiet tortor id est pretium</p>
            </div>
        </div>
    </div>
</div>

2) Исправлена высота нижнего колонтитула HTML

<div id="wrapper">
    <div class="w1">
        <p>Content text</p><p>Content text</p><p>Content text</p>
        <p>Content text</p><p>Content text</p><p>Content text</p>
        <p>Content text</p><p>Content text</p><p>Content text</p>
    </div>
</div>
<div id="footer">footer</div>

CSS находятся в jsfiddle ссылках

  • 0
    Эй, спасибо за ваше предложение! Он движется в правильном направлении, но все еще не совсем там ... Полоса прокрутки все еще находится на странице, а не в элементе content . Из-за этого и липкого нижнего колонтитула есть содержание позади нижнего колонтитула. Кроме того, когда не хватает содержания в content DIV, то DIV не растягивается до footer дел.
  • 0
    Можете ли вы опубликовать свой код в jsfiddle?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню