如何设置页面样式以使表单的提交按钮始终位于窗口底部？答案

【问题标题】：How can I style my page so that a form's submit button is always at the bottom of the window?如何设置页面样式以使表单的提交按钮始终位于窗口底部？
【发布时间】：2011-09-30 16:39:35
【问题描述】：

我的页面已经有一个永久“底部对齐”的页脚，使用高度为 100% 的容器和以下 css：

#footer {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
font-size: 12px;
}

我想要做的是让我的页面表单的按钮（在下面的 html 中由具有类“actionButtons”的 div 表示）始终直接位于页脚上方，而不管表单的其他内容如何。我可以保证表单的内容永远不会溢出。

<html>
<body>
    <div>
        <div class="wideContent">   
            <form>           
                <div class="actionButtons" style="text-align:right;">
                </div>
            </form>
        </div>    
    </div>

    <div id="footer"></div>   
</body>
</html>

我一直在搞乱高度/最小高度，但没有成功。上面的html需要什么css才能始终将“actionButtons”div放在窗口底部，就在页脚上方？提前谢谢你。

【问题讨论】：

让actionbuttons div也被绝对定位，并给它一个bottom: xxx，将它放在页脚上方？
@Marc B 当我这样做时，我的操作按钮漂浮在表单的底部，与它重叠（离页面底部不远）。表单有 Position: Relative 设置，如果有影响的话。
它确实产生了差异。 pos:abs 向上爬回 DOM 树，直到找到一个 pos:rel （或到达顶部）的节点来进行定位计算。

标签： html css window

【解决方案1】：

由于<form> 有position:relative，我能想到的将按钮强制到底部的唯一方法是position:fixed，例如...

#footer {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    font-size:12px;
    height:25px;
}

.actionButtons {
    position:fixed;
    bottom:25px;
    left:0;
    right:0;
    height:10px;
}

...如this demo。但它需要在#footer 上设置一个与.actionButtons 上的bottom 匹配的高度才能正确放置它。（我在.actionButtons 上添加了一个height 用于演示目的）。

【讨论】：