How can I style my page so that a form's submit button is always at the bottom of the window?_问答_开发者

How can I style my page so that a form's submit button is always at the bottom of the window?

开发者 https://www.devze.com 2023-03-18 14:35 出处：网络

I have a page that already has a footer permanently \"bottom-aligned\" using a container with 100% height and the following css:

相关专题：css window

I have a page that already has a footer permanently "bottom-aligned" using a container with 100% height and the following css:

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

What I would like to do is have the buttons for my page's form (denoted in the html below by the div with class "actionButtons") always directly above the footer, regardless of the other content of the form. I can guarantee that the form's content will never cause overflow.

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

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

I've been messing with height/min-height with no success. What css would I need for the html above to always place the "actionButtons" div at the bottom of the window, just above the foote开发者_如何学编程r? Thank you in advance.

Since the <form> has position:relative the only way I can think of forcing the buttons to the bottom is position:fixed, for example…

#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;
}

…as in this demo. But it will require a height being set on the #footer which matches the bottom on the .actionButtons to place it correctly. (I have included a height on the .actionButtons for demo purposes).