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

2023年11月15日 344次阅读

我有一个页面已经有一个页脚永久“底部对齐”使用一个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放在窗口的底部,就在页脚的上方？先感谢您.

最佳答案 由于< form>有位置：相对我可以想到强制按钮到底部的唯一方法是位置：固定,例如……

#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的底部相匹配,以正确放置它. (我在.actionButtons中包含了一个高度用于演示目的).

点赞