定位绝对底部+滚动修复答案

【问题标题】：Position absolute bottom + scroll fix定位绝对底部+滚动修复
【发布时间】：2015-10-02 19:29:51
【问题描述】：

我有以下元素：

“1 条评论”按钮容器相对于相对定位的主容器绝对定位。问题是当我调整它的大小并向下滚动时，“1 条评论”按钮容器会上升几个 px。我希望它保持在底部。就像一个固定在主容器上的粘性页脚。我不想为此使用 javascript。

您可以实时查看代码，here。

【问题讨论】：

你不能用position:fixed;吗？
我不能，因为该框在一个 div 内...它与浏览器窗口无关
@FlorinPop 这是因为您在#container 而不是#pane 上使用相对位置。请看我的回答link

标签： html css scroll absolute

【解决方案1】：

将所有内容放在一个 div 中：

overflow: scroll;

并将页脚放在 div 之外：

position: absolute; bottom: 0; width: 100%; margin: 0; padding: 0;

【讨论】：

【解决方案2】：

您只需将.subtitle_box 放在您的#container 之外

您可以使用包装器来创建一些基本样式，例如 madding、text-align。

【讨论】：

【解决方案3】：

除了 subtitle_box 底部之外，您应该将容器中的所有内容放入不同的容器中。

然后在不同的容器上设置overflow-y，带有绝对位置，和subtitle_box底部高度的底部偏移。

类似的东西

<div id="container">
    <div class="inner-container">
        <div class="title_box">
                <h1>Default Project</h1>

            <p>September 29 2015</p>
        </div>
        <div class="subtitle_box high">
                <h2>Incomplete work</h2>

        </div>
        <div class="subtitle_box dark">
            <button class="btn btn_toggle"></button>
                <h2>Task 1</h2>

            <button class="btn btn_menu"></button>
        </div>
        <div class="subtitle_box">
            <button class="btn btn_toggle"></button>
                <h2>Goal</h2>

        </div>
        <div class="text_box">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="subtitle_box">
            <button class="btn btn_toggle"></button>
                <h2>Involved in this task</h2>

        </div>
        <div class="extra_box">
            <div class="contact_box">
                <button class="btn btn_toggle"></button>
                <p class="bold">Samuel Rush</p> <span class="dot"></span>

                <p>Strive Technologies</p>
                <button class="btn right">Contact</button>
            </div>
            <div class="skills_box">
                <p>PHP,CSS,Joomla,MySQL,JavaScript,HTML5</p>
            </div>
        </div>
    </div>
    <div class="subtitle_box bottom">
        <button class="btn comment">1 Comment</button>
    </div>
</div>

然后添加下面的css

.inner-container {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:25px;
    overflow-y:auto;
}

.bottom {
    height:25px;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:0;
}

见http://jsfiddle.net/yhgsddcz/1/

【讨论】：

【解决方案4】：

从包装您的评论框的#container 中删除position: relative，.subtitle_box bottom 将相对于#pane。它就像一个魅力。恭喜！！！

【讨论】：