Question

我有以下元素：

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

您可以实时查看代码here。

Answer 1

将所有内容放在div中：

overflow: scroll;

并将页脚放在div之外：

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

Answer 2

您应该将容器中的所有内容放在另一个容器中的subtitle_box bottom之外。

然后在不同的容器上设置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/

Answer 3

您只需将require-final-newline放在.subtitle_box

之外

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

Answer 4

从function myFunction() { window.open('http://localhost/sample/first.aspx', '1'); window.open('http://localhost/sample/second.aspx', '2'); window.open('http://localhost/sample/third.aspx', '3'); window.open('http://localhost/sample/eleventh.aspx', 'myWindow', "height=200,width=200",'1'); window.open('http://localhost/sample/twelfth.aspx', 'myWindow', "height=200,width=200",'2'); }中移除position: relative，其中包含您的评论框，#container将相对于#pane而不是。它像魅力一样工作。祝贺!!!

定位绝对底部+滚动修复

4 个答案: