Use of forms seem to keep footer attached to content; not sticky at bottom of page

问题

I've got two forms on a webpage I'm making. On all the pages I have no forms on, the footer sits neatly at the bottom of the page however as soon as I introduce forms, the footer has some whitespace below it about the same size as the footer and sticks to the form. It should stay at the bottom of the page no matter viewport. I've looked extensively for an answer to this but can't find one.

I tried using this http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page person's blog to fix it but it didn't.

Any help would be greatly appreciated.

body {
    background-color: #40E39C;
    display: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    }
    
.style1{
    border: 2px;
    border-radius: 20px;
    border-color: #D6B656;
    background-color: #FFF2CC;
}
.style2{
    border: 2px;
    border-radius: 20px;
    border-color: #82B366;
    background-color: #D5E8D4;
}
.container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -142px;
    margin-top: 30px;
}

.footer {
    background-color: #EAEDD0;
    text-align: center;
    width: 100%;
    }
.footer, .push {
    height: 142px;
}
.footer li {
    display: inline-block;
}
.footer ul {
    text-align: center;
    margin: 0;
}

<div class="container">
        <div id="restaurant-book">
            <form class="style1" style="text-align: center;">
                <div style="display:inline;clear:both;">
                    First name: <br/><input type="text" name="firstName" required/><br/><br/>
                    Last name: <br/><input type="text" name="lastName" required/><br/><br/>
                </div>
                <div style="display:inline;clear:both;">
                    <?php if (isset($_POST["date"])){?>
                    Booking date: <br/><input type="date" value="<?php echo $_POST['date'] ?>" required/><br/><br/>
                    <?php } else {?>
                    Booking date: <br/><input type="date" required/><br/><br/>
                    <?php } ?>
                </div>
                <div style="display:inline;clear:both;">
                    <?php if (isset($_POST["time"])){?>
                    Time: <br/><input type="time" min="09:00:00" max="22:00:00" step="1800" value="<?php echo $_POST['time'] ?>" required/><br/><br/>
                    <?php } else {?>
                    Time: <br/><input type="time" min="09:00:00" max="22:00:00" step="1800" required/><br/><br/>
                    <?php } ?>
                </div>
                <div style="display:inline;clear:both;">
                    Number of adults: <br/><input type="number" max="10" required/><br/><br/>
                </div>
                <div style="display:inline;clear:both;">
                    Number of children (0-11 years): <br/><input type="number" max="10" required/><br/><br/>
                </div>
                <div style="display:inline;clear:both;">
                    Number of tables: <br/><input type="number" max="5" required/><br/>
                </div>
            </form>
        </div>
        <div class="push"></div>
    </div>
    <footer class="footer">
    <ul>
        <li><a href="./a.html">A | </a></li>
        <li><a href="./b.html">B | </a></li>
        <li><a href="./c.html">C | </a></li>
        <li><a href="./d.html">D | </a></li>
        <li><a href="./e.html">E | </a></li>
        <li><a href="./f.html">F </a></li>
    </ul>
</footer>

回答1:

I think I got you, try adding this to your css BUT first remove the "push" div

.footer {
background-color: #EAEDD0;
text-align: center;
width: 100%;
position: fixed;
bottom: 0;
}

来源：https://stackoverflow.com/questions/49758538/use-of-forms-seem-to-keep-footer-attached-to-content-not-sticky-at-bottom-of-pa