Question

我在实施以下方面遇到了问题：

在我index.html我有两个div

页面顶部的content div
页面底部的timeline div 这个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;
}

提前致谢！

Answer 1

这种技术被称为“底部的页脚”，并且有几种需要某种结构的实现。 Flexible footer height或Fixed footer height

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链接

使用动态页脚垂直拉伸内容div

1 个答案: