使用css使页脚停留在页面底部

Question

下面我有一些HTML代码。一切都是相对于contentRow定位的，它绝对定位。这会使页脚粘贴到浏览器窗口结束的位置，而不是滚动条结束的位置。

有什么方法可以让页脚下到滚动条结束的最底部。

<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
    <div id="s4-bodyContainer" style="position:relative">   

        <div class="headerSection" style="position:relative">           
            <div class="globalHeader">             
            </div>
        </div>  
        <div>          
            <div id="contentRow" style="position:relative">
                <div class="fixedWidthMain" style="position:relative">   
                         <div class="fixedWidthMain" style="position:absolute">   

                </div>           
                </div>
            </div>
        </div>
    </div>

    <!--PAGE FOOTER SECTION-->
    <div class="pageFooterSection" style="clear: both;position:relative">      

    </div>  
    </div>

Answer 1

为此提供了一些可用的解决方案，但它们基本上都是这样的。

示例

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

要记住的一点是，html中元素的高度始终通过父元素传递。因此，如果您没有在父母身上定义100％的身高，那么孩子也不会知道。祝你好运，如果你有任何其他问题，请告诉我:)）

<强>来源

http://mystrd.at/modern-clean-css-sticky-footer/

Answer 2

如果我理解正确，你可以使s4-bodyContainer位置：relative，以便contentRow只位于该容器内。然后页脚将进入bodyContainer下方。