У меня возникли проблемы с реализацией следующего:
В моем 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;
}
Заранее спасибо!
Этот метод называется "нижний колонтитул внизу" и имеет несколько реализаций, требующих определенной структуры. Гибкая высота нижнего колонтитула или фиксированная высота нижнего колонтитула
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 ссылках
content
. Из-за этого и липкого нижнего колонтитула есть содержание позади нижнего колонтитула. Кроме того, когда не хватает содержания в content
DIV, то DIV не растягивается до footer
дел.
content
div. Если я просто исправлю оба div-а и много контента, вы не сможете увидеть контент заtimeline
шкалой -div и вниз оттуда.