0

我在执行以下操作时遇到问题：

在我的index.html我有两个 div

  • content页面顶部的div

  • 页面底部的timelinediv 这个 div 是用 jQuery 动态创建的，所以它没有固定的高度

我希望内容 div 一直延伸到时间线 div。所以内容 div 的高度总是（window-height -timelineDiv-height）。当内容 div 的内容过多时，我不希望页面显示滚动条，我只希望 content-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;
}

提前致谢！

4

1 回答 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 链接中

于 2013-10-21T13:34:42.820 回答