Question

我正在尝试使用属性获取div

position:fixed;

拉伸页面的整个高度并根据需要垂直滚动，但也可以使用

包含页面顶部的偏移量

top:50px;
bottom:0;

div显示在页面底部下方。我希望div和滚动条在页面底部结束，而不是继续显示页面。如果我将div属性设置为top：0，它可以正常工作，但我需要从页面顶部开始的50px偏移量。我的页面代码如下所示：

<style>
    .container1
    {
        position: fixed;
        height: 100%;
        overflow: auto;
        width:100px;
        top:50px;
        bottom:0;
    }
    .content
    {
        height:2000px;
    }
</style>
<html>
    <body>
        <div class="container1">
            <div class="content">
            </div>
        </div>
    </body>
</html>

有人可以帮助我实现这个目标吗？

Answer 1

为此，您必须使用position: absolute;

.container1
    {
        position: absolute;
        height: 100%;
        overflow: auto;
        width:100px;
        top:50px;
        bottom:0;
    }

DEMO

Answer 2

尝试添加.container1

margin: 0 auto;

Answer 3

如果我理解你的问题，你可以在高度上使用calc，所以你将高度改为：

height: calc(100% - 50px);

Answer 4

只需删除

即可

height: 100%;

Demo link

如何使用CSS属性位置：固定顶部：50px和高度：100％？

4 个答案: