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

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

css html

Css 使用动态页脚垂直拉伸内容div,css,html,stretch,Css,Html,Stretch,我在执行以下操作时遇到问题： <body> <div id="content"> test test test test test test test test test test test test test<

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

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

在我的

index.html

中，我有两个div

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

页面顶部的
```
content
```
div

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

页面底部的
```
timeline
```
div 这个div是使用jQuery动态创建的，因此它没有固定的高度

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

我希望内容div一直向下延伸到时间线div。因此内容div的高度始终为（窗口高度-时间线div高度）。当content div有太多内容时，我不希望页面显示滚动条，我只希望content div显示滚动条

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

我知道这在javascript中是可能的，但我想知道是否有一种使用CSS的方法？调整窗口大小时CSS会更容易（使用javascript，我必须在调整大小时重新计算）

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

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>

提前谢谢

这种技术被称为“底部的页脚”，并且有几个需要特定结构的实现。或

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

1）灵活的页脚高度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>

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

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


Lorem ipsum dolor sit amet，是一位杰出的献身者。塞德·斯克利斯·维利特·奥奇。食物侵权者身份证
<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>

Lorem ipsum dolor sit amet，是一位杰出的献身者。塞德·斯克利斯·维利特·奥奇。这是一种侵权行为
<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>

2）固定页脚高度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>

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

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


内容文本
内容文本
内容文本
<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>

内容文本
内容文本
内容文本
<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>

内容文本
内容文本
内容文本
<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在JSFIDLE链接中

您可以定位div fixed并使用top、bottom、left和right在屏幕上的确切位置。这是正确的，但不会改变任何东西。问题不在于div的位置。问题是

内容

div的高度。如果我只修复了两个div，并且有很多内容，您就看不到

时间线

-div后面和下面的内容。嘿，谢谢您的建议！它正朝着一个好的方向发展，但它仍然不在那里。。。滚动条仍在页面上，而不在

content

div中。由于这一点和粘性页脚，页脚后面有内容。另外，当

content

div中没有足够的内容时，div不会向下延伸到

footer

div。我已经用javascript解决了这个问题，因此您可以看到我想要完成的任务。我只是想知道CSS是否可以实现这一点，因为这可能会提高性能……例如，请尝试使用.content holder（最小高度：100%））并在页面加载事件中初始化函数。在您的情况下，您不能没有JS

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